material_admin/src/views/order/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <cSearch :is_back="true" @toBack="toBack"></cSearch>
        </el-col>
        <div class="center">
          <el-col :span="12" class="two">
            <el-col :span="24" class="two_1">
              <el-col :span="12" class="left">
                <el-icon>
                  <Shop />
                </el-icon>
                {{ info.supplier_name || '暂无' }}
              </el-col>
              <el-col :span="12" class="right"> {{ info.zhStatus }}</el-col>
            </el-col>
            <el-col :span="24" class="two_2">
              <el-col :span="6" class="left">
                <el-image v-if="info.spec_file" class="image" :src="info.spec_file && info.spec_file.length > 0 ? info.spec_file[0].url : ''" />
                <el-image v-else class="image" :src="info.good_file && info.good_file.length > 0 ? info.good_file[0].url : ''" />
              </el-col>
              <el-col :span="18" class="right">
                <el-col :span="24" class="name">
                  <text>{{ info.zhType || '暂无' }}</text>
                  <text>{{ info.good_name || '暂无' }}</text>
                </el-col>
                <el-col :span="24" class="spec">
                  <text>规格：{{ info.spec_name || '暂无' }}</text>
                </el-col>
                <el-col :span="24" class="num">
                  <text>数量：{{ info.num || '暂无' }}</text>
                </el-col>
                <el-col :span="24" class="money">
                  <text>￥{{ info.money || '暂无' }}</text>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="12" class="thr">
            <el-col :span="24" class="thr_1">
              <text>订单号：</text>
              <text>{{ info.order_id || '暂无' }}</text>
            </el-col>
            <el-col :span="24" class="thr_1">
              <text>下单时间：</text>
              <text>{{ info.buy_time || '暂无' }}</text>
            </el-col>
            <el-col :span="24" class="thr_1" v-if="info.sleader_name">
              <text>采购审批领导：</text>
              <text>{{ info.sleader_name || '暂无' }}</text>
            </el-col>
            <el-col :span="24" class="thr_1" v-if="info.saccounting_name">
              <text>采购审批会计：</text>
              <text>{{ info.saccounting_name || '暂无' }}</text>
            </el-col>
          </el-col>
          <el-col :span="12" class="four">
            <el-col :span="24" class="four_1">
              <text>下单人员：</text>
              <text>{{ info.user_name || '暂无' }}</text>
            </el-col>
            <el-col :span="24" class="four_1">
              <text>下单角色：</text>
              <text>{{ info.zhRole || '暂无' }}</text>
            </el-col>
            <el-col :span="24" class="four_1">
              <text>下单人员电话：</text>
              <text>{{ info.user_tel || '暂无' }}</text>
            </el-col>
            <el-col :span="24" class="four_1">
              <text>收货地址：</text>
              <text>{{ info.address || '暂无' }}</text>
            </el-col>
          </el-col>
          <el-col :span="12" class="five">
            <el-col :span="12" class="left">
              <text>商品总价</text>
            </el-col>
            <el-col :span="12" class="right">
              <text>￥{{ info.total_money || '暂无' }}</text>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
// 接口
import { OrderDetailStore } from '@/stores/order/orderDetail';
import { DictDataStore } from '@/stores/dict/dictData';
import { RoleStore } from '@/stores/role/role'; // 角色
import type { IQueryResult } from '@/util/types.util';
const dictData = DictDataStore();
const roleAxios = RoleStore();
const orderDetailAxios = OrderDetailStore();
// 路由
const route = useRoute();
// 加载中
const loading: Ref<any> = ref(false);
// 表单
let info: Ref<any> = ref({});
// 字典表
const statusList: Ref<any> = ref([]);
const typeList: Ref<any> = ref([]);
const roleList: Ref<any> = ref([]);
// 请求
onMounted(async () => {
  loading.value = true;
  await searchOther();
  await search();
  loading.value = false;
});
const search = async () => {
  let id = route.query.id;
  if (id) {
    let res: any = await orderDetailAxios.detail(id);
    if (res.errcode == '0') {
      res.data.zhStatus = await searchDict(res.data.status, 'status');
      res.data.zhType = await searchDict(res.data.good_type, 'type');
      res.data.zhRole = await searchDict(res.data.user_role, 'role');
      info.value = res.data as {};
    }
  }
};
// 查询字典表
const searchDict = async (e, model) => {
  let data;
  if (model == 'status') {
    data = statusList.value.find((i) => i.value == e);
    if (data) return data.label;
    else return '暂无';
  } else if (model == 'type') {
    data = typeList.value.find((i) => i.value == e);
    if (data) return data.label;
    else return '暂无';
  } else {
    data = roleList.value.find((i) => i.code == e);
    if (data) return data.name;
    else return '暂无';
  }
};
// 查询其他信息
const searchOther = async () => {
  let res: IQueryResult;
  // 状态
  res = await dictData.query({ type: 'order_status', is_use: '0' });
  if (res.errcode == '0') statusList.value = res.data;
  // 类型
  res = await dictData.query({ type: 'goods_type', is_use: '0' });
  if (res.errcode == '0') typeList.value = res.data;
  // 角色
  res = await roleAxios.query({ is_use: '0' });
  if (res.errcode == '0') roleList.value = res.data;
};
// 返回上一页
const toBack = () => {
  window.history.go(-1);
};
</script>
<style scoped lang="scss">
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.two {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
  border: 1px solid #f1f1f1;
  border-radius: 10px;

  .two_1 {
    display: flex;
    justify-content: space-around;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #e2e2e2;

    .left {
      display: flex;
      align-items: center;
    }

    .right {
      color: red;
      text-align: right;
    }
  }

  .two_2 {
    display: flex;
    padding: 10px 0;

    .left {
      .image {
        width: 150px;
        height: 150px;
        border-radius: 5px;
        border: 1px solid #f9f9f9;
      }
    }

    .right {
      .name {
        padding: 10px 0 0 0;
        font-size: 20px;

        text:first-child {
          font-size: 16px;
          color: #ffffff;
          background-color: #007AFF;
          border-radius: 5px;
          padding: 2px 5px;
        }
      }

      .spec {
        font-size: 16px;
      }

      .num {
        font-size: 16px;
        color: #858585;
      }

      .money {
        font-size: 18px;
        color: red;
        font-weight: bold;
      }
    }
  }
}

.thr {
  width: 100%;
  margin: 10px 0 0 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #f1f1f1;

  .thr_1 {
    padding: 5px 0;
    font-size: 18px;

    text:first-child {
      color: #858585;
    }
  }
}

.four {
  width: 100%;
  margin: 1vw 0 0 0;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #f1f1f1;

  .four_1 {
    padding: 5px 0;
    font-size: 18px;

    text:first-child {
      color: #858585;
    }
  }
}

.five {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0 0;
  padding: 10px;
  border-radius: 10px;
  font-size: 18px;
  border: 1px solid #f1f1f1;

  .left {
    color: #858585;
  }

  .right {
    text-align: right;
  }
}
</style>