feat: 从au release分支合并ESG相关功能.解决代码冲突.

assets/css/common.scss

@@ -1,4 +1,4 @@
-$deep-blue: #004a97;
+$deep-blue: #00213b;
 html,
 body,
 #__nuxt,
@@ -136,7 +136,8 @@ textarea {
     background-color: $deep-blue !important;
     border-color: $deep-blue !important;
     &:hover {
-        background-color: #013269;
+        background-color: $deep-blue !important;
+        opacity: 0.8;
     }
 }
 

components/Card.vue

@@ -4,11 +4,18 @@
       <!-- <nuxt-link :to="{ name: 'product-code', params: { code: cardData.product_code } }"> -->
       <div class="card-img">
         <el-image  
-          :src="comImg"
-          class="card-img-1"
-          fit="cover"
-          style="width: 100%; height: 100%"
+        :src="comImg"
+        class="card-img-1"
+        fit="cover"
+        style="width: 100%; height: 100%"
         ></el-image>
+        <div class="co2-info" v-if="cardData.co2_au_air && cardData.co2_au_sea">
+            <img src="@/assets/img/esg/ship.png" alt="CO2" class="co2-icon" />
+            <span>{{ cardData.co2_au_sea || 0 }} kg</span>
+          <div></div>
+            <img src="@/assets/img/esg/aircraft.png" alt="CO2" class="co2-icon" />
+            <span>{{ cardData.co2_au_air || 0 }} kg</span>
+        </div>
         <img class="best_icon" :src="comBestIcon" v-if="comBestIcon"/>
         <div class="cycle_icon">
           <img
@@ -101,6 +108,7 @@ export default {
     padding: 10px;
     box-sizing: border-box;
     overflow: hidden;
+    position: relative;
     .card-img-1{
       transition: all 0.5s ;
     }
@@ -109,6 +117,30 @@ export default {
       top: 0;
       left: 0;
     }
+    .co2-info {
+      display: flex;
+      align-items: center;
+      background: #07A73A;
+      color: #fff;
+      font-weight: bold;
+      border-radius: 2px;
+      padding: 5px;
+      position: absolute;
+      bottom: 10px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+      div{
+        display: inline-block;
+        margin: 0 10px;
+        width: 2px;
+        height: 12px;
+        border-right: 2px solid #fff;
+      }
+      .co2-icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 4px;
+      }
+    }
     .cycle_icon {
       position: absolute;
       top: 0;

components/DesignFormDialog.vue

@@ -118,7 +118,6 @@ export default {
 
 <style lang="scss" scoped>
 :deep(.el-dialog__header){
-    padding: 20px;
     border-bottom:1px solid #eee;
 }
 textarea{

components/FootprintReportDialog.vue

@@ -0,0 +1,235 @@
+<template>
+  <el-dialog :visible.sync="visible" width="550px" :title="'Carbon Footprint Report'" :before-close="handleClose" :lock-scroll="false">
+    <div>
+      <el-form label-width="70px">
+        <el-form-item label="Model">
+          <el-select v-model="form.model" placeholder="Please select" style="width:100%;" clearable filterable>
+            <el-option
+                :label="item.accountName.replace(/\s*[\(\（][^)\）]*[\)\）]$/, '')"
+              v-for="(item, idx) in carbon"
+              :value="idx"
+              :key="idx"
+            />
+          </el-select>
+        </el-form-item>
+        <div class="form-row">
+          <el-form-item label="Quantity" style="flex:1;">
+            <el-input v-model="form.quantity" type="number" :min="1" :step="1" :controls="false"
+              placeholder="Please input" class="left-input-number" />
+          </el-form-item>
+          <el-form-item label="Transport" style="flex:1;margin-left:10px;">
+            <el-select v-model="form.transport" placeholder="Please select" style="width:100%;" clearable>
+              <el-option label="AU-Sea" value="AU-Sea" />
+              <el-option label="AU-Air" value="AU-Air" />
+            </el-select>
+          </el-form-item>
+        </div>
+      </el-form>
+      <div class="carbon-report-card">
+        <div class="carbon-report-main">
+          <div class="carbon-report-header">
+            <span>Product Carbon Footprint</span>
+          </div>
+          <div class="carbon-report-value">{{ comEmissionTotal }}</div>
+          <div class="carbon-report-date">kgCO₂e per product unit</div>
+          <div class="carbon-report-date">Accounting Period：{{ this.carbon[this.form.model]?.accountTime }}</div>
+          <img src="@/assets/img/esg/bg_city.png" alt="bg" class="carbon-bg" />
+          <div class="carbon-report-equal">
+            <div class="equal-title">Equivalent to</div>
+            <div class="equal-list">
+              <div class="equal-item">
+                <img src="@/assets/img/esg/tree.png" alt="tree" />
+                <div>{{ multiply(comEquallist.equallist[0]?.amount, form.quantity) || 0 }} <span>tree</span></div>
+                <div class="equal-desc">CO₂ uptake by 1 ammodendron tree</div>
+              </div>
+              <div class="equal-item">
+                <img src="@/assets/img/esg/electricity.png" alt="electricity" />
+                <div>{{ multiply(comEquallist.equallist[1]?.amount, form.quantity) || 0 }} <span>kWh</span></div>
+                <div class="equal-desc">Household electricity consumption</div>
+              </div>
+              <div class="equal-item">
+                <img src="@/assets/img/esg/iphone.png" alt="iphone" />
+                <div>{{ multiply(comEquallist.equallist[2]?.amount, form.quantity) || 0 }} <span>day</span></div>
+                <div class="equal-desc">The number of days an iPhone is used</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style="text-align:right;margin-top:20px;">
+        <el-button type="primary" class="report-btn"
+          @click="download(comEquallist?.url)">Download</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { times as npTimes } from 'number-precision';
+
+export default {
+  props: {
+    visible: { type: Boolean, default: false },
+    carbon: { type: Array, default: () => [] }
+  },
+  data() {
+    return {
+      form: {
+        model: '',
+        quantity: 1,
+        transport: ''
+      }
+    }
+  },
+  computed: {
+    comEquallist() {
+      return this.carbon[this.form.model]?.accountlist?.find(item => item.code === this.form.transport) || { equallist: [], emissionTotal: 0 };
+    },
+    comEmissionTotal() {
+      return this.multiply(this.comEquallist.emissionTotal, this.form.quantity).toFixed(2) || 0;
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:visible', false);
+    },
+    multiply(a, b) {
+      return npTimes(Number(a), b);
+    },
+    download(url) {
+      if (!url) {
+        this.$message.error('No report available for download');
+        return
+      }
+      var urlStr = url.match('[^/]+(?!.*/)')[0]
+      this.$utils.downloadBlob(url, urlStr)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$green: #006D28;
+$blue-dark: #15395A;
+$white: #fff;
+$gray: #666;
+$radius-lg: 16px;
+$shadow-green: 0 2px 8px rgba($green, 0.08);
+
+:deep(.el-dialog__header) {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.form-row {
+  display: flex;
+  gap: 10px;
+}
+
+.carbon-report-card {
+  background: transparent;
+
+  .carbon-report-main {
+    background: $green;
+    border-radius: 10px;
+    color: $white;
+    padding: 18px;
+    position: relative;
+    overflow: hidden;
+    min-height: 120px;
+
+    .carbon-report-header {
+      font-size: 20px;
+      font-weight: bold;
+      margin-bottom: 8px;
+    }
+
+    .carbon-report-value {
+      font-size: 32px;
+      font-weight: bold;
+
+      .unit {
+        font-size: 18px;
+        font-weight: normal;
+      }
+    }
+
+    .carbon-report-date {
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+  }
+
+  .carbon-bg {
+    position: absolute;
+    right: 20PX;
+    top: 20PX;
+    width: 232px;
+    height: 126px;
+    opacity: 0.7;
+    pointer-events: none;
+  }
+
+  .carbon-report-equal {
+    background: $white;
+    color: $green;
+    border-radius: 10px;
+    padding: 18px;
+    position: relative;
+    z-index: 2;
+    box-shadow: $shadow-green;
+
+    .equal-title {
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: #000;
+    }
+
+    .equal-list {
+      display: flex;
+      justify-content: space-around;
+      align-items: flex-start;
+      margin-top: 20px;
+
+      .equal-item {
+        text-align: center;
+        width: 130px;
+
+        img {
+          width: 32px;
+          height: 32px;
+          margin-bottom: 4px;
+        }
+
+        div {
+          &:nth-child(2) {
+            font-size: 14px;
+            font-weight: 600;
+            color: #000;
+          }
+        }
+
+        .equal-desc {
+          font-size: 12px;
+          color: $gray;
+          margin-top: 2px;
+          word-break: break-word;
+        }
+      }
+    }
+  }
+}
+
+.report-btn {
+  background: $blue-dark !important;
+  border: none !important;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+:deep(.el-input__inner) {
+  padding-right: 0;
+}
+</style>

components/Project.vue

@@ -50,11 +50,16 @@
             src="@/assets/img/tick.png" /><span>Item Record</span>
         </div>
       </a>
+      <div v-if="productInfo.carbon?.length"
+        class="flex btn-nav" @click="openFootprint">
+        <img src="@/assets/img/esg/co2.png" />
+        <span>Carbon Footprint</span>
+      </div>
     </div>
   </section>
 </template>
-
 <script>
+
 export default {
   props: {
     productInfo: {
@@ -147,6 +152,12 @@ export default {
           location.origin + `/product-builder/${this.$route.params.code}`
       }, 0)
     },
+    openTicket(){
+      this.$emit('handleOpenTicket')
+    },
+    openFootprint(){
+      this.$emit('handleOpenFootprint')
+    }
   },
 }
 </script>

components/product/ProductRight.vue

@@ -79,6 +79,13 @@
           <h3>Description</h3>
           <p v-html="comInfo.description"></p>
         </div>
+        <div
+          class="details-1"
+          v-if="pageData.carbon?.length">
+          <p><span>Carbon Footprint Transparency</span></p>
+          <p>This product has undergone mid-lifecycle carbon footprint assessment. Click the ‌<span>Carbon Footprint</span> project to view detailed calculations by transport mode;</p>
+          <p>We offer <span>Gold Standard-ceriied carbon offset proiects</span> for neutralization, ensuring full transparency and compliance with global sustainability standards. Contact us for detailed reports.</p>
+        </div>
         <div
           class="details-2"
           v-if="pageData.pbo">
@@ -377,8 +384,24 @@
           :visible.sync="ticketFormVisible"
           @handleSend="sendTicket"
           :rules="rules"></form-dialog> -->
+      <footprint-report-dialog
+        :visible.sync="footprintVisible"
+        :carbon="pageData.carbon"></footprint-report-dialog>
       <!-- 右侧project浮动框 -->
-      <project :productInfo="pageData"></project>
+      <project
+        v-if="isFrontend"
+        :productInfo="pageData"
+        :domainList="domainList"
+        @handleAdd="openProjectdDialog"
+        @handleOpenTicket="openTicket"
+        @handleOpenFootprint="footprintVisible = true"
+        @save-selected-data="saveUserSelected"></project>
+      <!-- 加入project弹框 -->
+      <project-dialog
+        :visible.sync="projectdDialogVisible"
+        :id="pageData.id"
+        :projectObj="projectObj"
+        :isCopy="false"></project-dialog>
       <ElImageViewer
         v-if="showViewer"
         :on-close="closeViewer"
@@ -467,6 +490,7 @@ export default {
           { required: true, message: 'Please enter', trigger: 'blur' },
         ],
       },
+      footprintVisible: false,
     }
   },
   computed: {

components/product/product.scss

@@ -189,7 +189,151 @@ $deep-blue: #004a97;
         height: 60px;
         margin-right: 20px;
         margin-bottom: 20px;
-        cursor: pointer;
+        .details {
+          h3 {
+            font-size: 20px;
+            margin-bottom: 10px;
+          }
+          p,
+          li {
+            line-height: 1.8;
+            font-size: 16px;
+          }
+          .details-1 {
+            margin-bottom: 15px;
+            p {
+              color: #4a596c;
+              word-break: keep-all;
+              span {
+                color: #444;
+                font-weight: 600;
+              }
+            }
+            li {
+              color: #4a596c;
+              white-space: pre-wrap;
+              word-break: keep-all;
+            }
+            ul {
+              padding-left: 20px;
+              li {
+                list-style-type: disc;
+              }
+            }
+          }
+          .details-2 {
+            h3 {
+              text-align: center;
+            }
+            p {
+              text-indent: 2em;
+              color: #ff4500;
+              font-weight: bold;
+              text-align: center;
+            }
+          }
+          .details-3 {
+            position: relative;
+            ul {
+              position: relative;
+              z-index: 1;
+              margin-top: 15px;
+              li {
+                border-bottom: 1px solid rgba(190, 190, 190, 0.2);
+                display: flex;
+                div {
+                  line-height: 1.5;
+                  padding: 5px 0 5px 20px;
+                }
+                .title {
+                  font-size: 16px;
+                  text-align: center;
+                  background-color: $deep-blue;
+                  width: 100%;
+                  color: #fff;
+                }
+                .point {
+                  min-width: 193px;
+                  background-color: #f5f5f5;
+                  font-size: 16px;
+                }
+                .info {
+                  font-size: 14px;
+                  color: #4a596c;
+                  & + .info {
+                    padding-left: 0;
+                  }
+                }
+                a {
+                  color: #6495ed;
+                }
+              }
+            }
+          }
+          button {
+            position: absolute;
+            top: 0;
+            right: 0; /* 初始位置在 ul 区域的右边 */
+            transition: right 1.5s; /* 右移效果和 z-index 延迟变更 */
+            z-index: 0;
+            height: 34px;
+            display: flex;
+            align-items: center;
+          }
+
+          .details-3:hover .el-button {
+            right: -75px; /* 鼠标移入 ul 区域时滑出到右上角 */
+            transition: right 1.5s;
+          }
+
+          .showcase {
+            height: 60px;
+            // margin-top: 20px;
+            .banner {
+              width: 100%;
+              height: 100%;
+              background-size: cover;
+              background-repeat: no-repeat;
+              background-position: center;
+            }
+          }
+        }
+        h5 {
+          font-size: 16px;
+          margin-bottom: 20px;
+        }
+        .resources {
+          width: 450px;
+          margin-left: 20px;
+        }
+        .maketing {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          p {
+            cursor: pointer;
+            margin-bottom: 30px;
+            display: inline-block;
+            img {
+              margin-right: 10px;
+              vertical-align: middle;
+            }
+            vertical-align: middle;
+          }
+        }
+        .compliance {
+          img {
+            height: 60px;
+            margin-right: 20px;
+            margin-bottom: 20px;
+            cursor: pointer;
+          }
+        }
+        .quote-tips {
+          font-size: 16px;
+        }
+        .red-text {
+          color: #ef4135;
+        }
       }
     }
     .quote-tips {

mixins/category.js

@@ -523,6 +523,7 @@ export default {
                 console.log('---')
               }
               const result = {
+                ...item,
                 // img: item.img || '',
                 // colour_imgs: item.colour_imgs,
                 price_min: parseFloat(item.price_min),

pages/home/myDetail/components/orderDetailPart.vue

@@ -5,6 +5,23 @@
       v-loading="true"
       class="com-loading"></div>
     <template v-else-if="isLoading == 2">
+      <!-- <div class="eco-tip"  v-if="orderDetail.Emission_Total_Kg && orderDetail.Emission_Total_Kg != '0'">
+        <div class="eco-tip-title">
+          <img
+            src="@/assets/img/esg/leaf.png"
+            alt="eco"
+            class="eco-tip-icon" />
+          <span> Protecting Nature Starts with Your Choice</span>
+        </div>
+        <div class="eco-tip-desc">
+          Your Eco-Friendly Purchase Generated
+          <span class="eco-tip-co2"
+            >{{ orderDetail.Emission_Total_Kg || 0 }} KG</span
+          >
+          Of Carbon Emissions. Together, We<br />
+          Embrace Enyironmental Responsibility For A More Sustainable Future.
+        </div>
+      </div> -->
       <section class="main-header">
         <div class="main-header-mid flex between">
           <h1>Job Name：{{ orderDetail.Sales_Order_Title_Job_Name }}</h1>
@@ -13,14 +30,21 @@
             class="user_logo"
             v-if="orderDetail.user_logo" />
         </div>
-        <div class="main-header-mid flex between">
+        <div class="main-header-mid">
           <ul class="left">
             <li
-              class="left-i"
-              @click="shareDialogVisible = true"
+              class="left-i link-div"
               v-if="isShow">
-              <i class="el-icon-share"></i>
-              <span>Client Tracking Share</span>
+              <div @click="shareDialogVisible = true">
+                <i class="el-icon-share"></i>
+                <span>Client Tracking Share</span>
+              </div>
+              <!-- <div v-for="(item) in orderDetail.crm_esg_res?.flat()"
+              @click="downloadEsg(item)" 
+              :key="item.id">
+                <img src="@/assets/img/order/cer.png" />
+                <span> DownLoad {{ item.name }}</span>
+              </div> -->
             </li>
             <li
               class="left-i"
@@ -252,6 +276,10 @@
             min-width="300">
             <template slot-scope="scope">
               <p class="colorBlue">{{ scope.row.product_name }}</p>
+              <!-- <p class="table-list-co2" v-if="scope.row.Emision_Details_value && scope.row.Emision_Details_value != '0'">
+                  <img src="@/assets/img/esg/co2_green.png" alt="CO2" class="co2-icon" />
+                  <span>{{ scope.row.Emision_Details_value }} kg CO₂e</span>
+                </p> -->
               <p v-html="scope.row.product_description"></p>
               <!-- <p :class="scope.row.showMore?'ellipsis':''" v-html="scope.row.product_description"></p>
                     <p class="colorBlue cursor" @click="toggleShow(scope.row)" v-if="scope.row.product_description">{{scope.row.showMore?'Show More':'Conceal'}}<i  :class="scope.row.showMore?'el-icon-caret-bottom':'el-icon-caret-top'"></i></p> -->
@@ -344,13 +372,17 @@
             </tr>
           </table>
         </div>
-        <template v-if="isShow">
-          <p class="notes-1">Notes</p>
-          <p class="notes-2">Terms & conditions</p>
-          <p class="notes-2">Artwork Approval</p>
-          <p class="notes-3">{{ orderDetail.Subject }}</p>
-        </template>
       </section>
+      <!-- <section 
+        v-if="orderDetail.Order_Stage === 'Sales Order Created'" style="text-align: right;border: none;">
+        <el-button
+        v-if="orderDetail.Order_Stage === 'Sales Order Created'"
+        @click="openApproved(orderDetail)"
+        size="small"
+        style="background-color: rgb(0, 33, 59); color: #fff;"
+        plain
+        >Approved</el-button>
+      </section> -->
     </template>
     <div v-else>
       <el-empty description="No Data"></el-empty>
@@ -558,6 +590,60 @@ export default {
       this.Tracking_URL = url
       this.urlDialogShow = true
     },
+    download(url) {
+      var urlStr = url.match('[^/]+(?!.*/)')[0]
+      this.$utils.downloadBlob(url, urlStr)
+    },
+    downloadEsg(item) {
+      if (!item.id) {
+        this.$message.error('No report available for download')
+        return
+      }
+
+      this.$axios
+        .post('Crmdata/downloadreport', { id: item.id, name: item.name })
+        .then(res => {
+          if (res.result) {
+            this.$utils.downloadBlob(
+              res.result?.data,
+              decodeURIComponent(res.result?.url_name)
+            )
+          } else {
+            this.$message.error('Download failed, please try again later')
+          }
+        })
+        .catch(() => {
+          this.$message.error('Download failed, please try again later')
+        })
+    },
+    openApproved(row) {
+      this.$confirm(
+        `
+        <div style="text-align:center;">
+          <h3 style="margin:0 0 10px;color:#333;">Ready to order?</h3>
+          <p style="margin:0;font-size:16px;color:#333;">Your total is <b>${this.transformNumber(
+            row.Grand_Total
+          )}</b>. Confirm to place your order.</p>
+        </div>
+        `,
+        '',
+        {
+          dangerouslyUseHTMLString: true,
+          confirmButtonText: 'Confirm',
+          cancelButtonText: 'Cancel',
+          confirmButtonClass: 'el-button',
+          cancelButtonClass: 'el-button--info',
+          center: true,
+          showClose: false,
+          confirmButtonClass: 'com-btnblack',
+        }
+      ).then(() => {
+        this.$router.push({
+          path: '/so-confirm',
+          query: { id: row.sales_orders_id, pc_psw: row.HASH },
+        })
+      })
+    },
   },
 }
 </script>

pages/home/myDetail/detail.scss

@@ -13,6 +13,45 @@
     margin-top: 23px;
     padding: 0 20px;
   }
+  .eco-tip {
+    background: #f7fbff;
+    border-radius: 10px;
+    padding: 28px 0 18px 0;
+    margin: 24px 0 18px 0;
+    text-align: center;
+    box-sizing: border-box;
+    .eco-tip-title {
+      font-size: 26px;
+      font-weight: bold;
+      color: #FF3F0B;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 10px;
+      .eco-tip-icon {
+        width: 40px;
+        height: 40px;
+        margin-right: 8px;
+        vertical-align: middle;
+      }
+    }
+    .eco-tip-desc {
+      font-size: 22px;
+      color: #102f47;
+      font-weight: 500;
+      line-height: 2;
+      .eco-tip-co2 {
+        color: #19b94a;
+        font-weight: bold;
+        font-size: 24px;
+      }
+      .eco-tip-tree {
+        color: #19b94a;
+        font-weight: bold;
+        font-size: 24px;
+      }
+    }
+  }
   section {
     width: 100%;
     max-width: 1300px;
@@ -38,12 +77,23 @@
       .left {
         font-size: 20px;
         align-self: flex-start;
+        .link-div{
+          div {
+            display: inline-block;
+            margin-right: 10px;
+            margin-bottom: 10px;
+            img{
+              vertical-align: middle;
+              width: 20px;
+            }
+          }
+        }
         li {
           i {
             vertical-align: middle;
           }
           span {
-            color: #1890ff;
+            color: #1D4992;
             cursor: pointer;
           }
         }
@@ -170,6 +220,22 @@
   .colorBlue {
     color: #1890ff;
   }
+  .table-list-co2{
+    display: inline-flex;
+    align-items: center;
+    background: #f4fcf6;
+    border: 2px solid #7ed7a5;
+    border-radius: 4px;
+    padding: 1px 6px;
+    font-weight: bold;
+    color: #07A73A;
+    font-size: 12px;
+    .co2-icon {
+      width: 18px;
+      height: 18px;
+      margin-right: 4px;
+    }
+  }
   .ellipsis {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -191,8 +257,21 @@
   }
   .notes-2 {
     margin-bottom: 10px;
-    font-size: 14px;
-    font-weight: 600;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    img{
+      width: 20px;
+      margin-right: 10px;
+    }
+    i{
+      font-size: 20px;
+    }
+    span{
+      color: #1D4992;
+      cursor: pointer;
+      font-weight: 500;
+    }
   }
   .notes-3 {
     width: 70%;

pages/home/myDetail/index.vue

@@ -145,6 +145,7 @@
             </el-input>
           </div>
           <el-table
+            class="table-order-list"
             :data="enquiryList"
             stripe
             style="width: 100%"
@@ -317,14 +318,26 @@
             >
           </div>
           <el-table
+            class="table-order-list"
             :data="tableData"
             v-loading="tableLoading"
             stripe
-            style="width: 100%"
-            :header-cell-style="{ background: '#00213b', color: '#ffffff' }">
+            :header-cell-style="{ background: '#00213b', color: '#ffffff' }"
+            style="width: 100%">
             <el-table-column
               prop="Sales_Order_Title_Job_Name"
               label="Job Name">
+              <template slot-scope="scope">
+                <p class="table-list-p1">
+                  {{ scope.row.Sales_Order_Title_Job_Name }}
+                </p>
+                <!-- <p class="table-list-co2" v-if="scope.row.Emission_Total_Kg && scope.row.Emission_Total_Kg != '0'">
+                  <img src="@/assets/img/esg/co2_green.png" alt="CO2" class="co2-icon" />
+                  <span>{{ scope.row.Emission_Total_Kg }} kg CO₂e</span>
+                </p> 
+                <p class="table-list-p2">Brand Name:{{ scope.row.Brand_Name }}</p>
+                <p class="table-list-p2">ETA:{{ $utils.formatTime(scope.row.Expected_Delivery_Date,'DD/MM/YYYY') }}</p> -->
+              </template>
             </el-table-column>
             <el-table-column
               width="100"
@@ -376,13 +389,29 @@
             </el-table-column>
             <el-table-column
               label="Action"
-              width="80"
+              width="100"
               align="center">
               <template slot-scope="scope">
+                <!-- <el-button
+                  v-if="scope.row.Order_Stage_new === 'Sales Order Created'"
+                  @click="openApproved(scope.row)"
+                  size="small"
+                  style="
+                    background-color: rgb(0, 33, 59);
+                    color: #fff;
+                    width: 85px;
+                  "
+                  plain
+                  >Approved</el-button> -->
                 <el-button
                   @click="goOrderDetail(scope.row)"
                   size="small"
-                  style="background-color: rgb(0, 33, 59); color: #fff"
+                  style="
+                    background-color: rgb(0, 33, 59);
+                    color: #fff;
+                    width: 85px;
+                    margin: 0;
+                  "
                   plain
                   >View</el-button
                 >
@@ -714,6 +743,34 @@ export default {
       })
       window.open(routeUrl.href, '_blank')
     },
+    openApproved(row) {
+      this.$confirm(
+        `
+        <div style="text-align:center;">
+          <h3 style="margin:0 0 10px;color:#333;">Ready to order?</h3>
+          <p style="margin:0;font-size:16px;color:#333;">Your total is <b>${this.transformNumber(
+            row.Grand_Total
+          )}</b>. Confirm to place your order.</p>
+        </div>
+        `,
+        '',
+        {
+          dangerouslyUseHTMLString: true,
+          confirmButtonText: 'Confirm',
+          cancelButtonText: 'Cancel',
+          confirmButtonClass: 'el-button',
+          cancelButtonClass: 'el-button--info',
+          center: true,
+          showClose: false,
+          confirmButtonClass: 'com-btnblack',
+        }
+      ).then(() => {
+        this.$router.push({
+          path: '/so-confirm',
+          query: { id: row.sales_orders_id, pc_psw: row.HASH },
+        })
+      })
+    },
     getEnquiryList() {
       this.tableLoading = true
       this.$axios
@@ -935,7 +992,39 @@ export default {
         }
       }
     }
+    .table-order-list {
+      width: 100%;
+      border: 1px solid #c2c2c2;
+      .table-list-p1 {
+        font-weight: 600;
+        color: #333;
+        font-size: 16px;
+      }
+      .table-list-p2 {
+        font-size: 14px;
+      }
+      .table-list-co2 {
+        display: inline-flex;
+        align-items: center;
+        background: #f4fcf6;
+        border: 2px solid #7ed7a5;
+        border-radius: 4px;
+        padding: 1px 6px;
+        font-weight: bold;
+        color: #07a73a;
+        font-size: 12px;
+        .co2-icon {
+          width: 18px;
+          height: 18px;
+          margin-right: 4px;
+        }
+      }
+    }
     .upload-item {
+      position: absolute;
+      right: 50px;
+      top: 0;
+      z-index: 2;
       .el-form-item__content {
         z-index: 1;
       }