helper下载、数字，订单列表，详情云样式

src/components/infoList.vue

@@ -6,39 +6,42 @@
         {{ item.title }}
       </p>
       <p v-if="!(item.prop && item.prop == 'title')">
-        <span v-if="item.type == 'url'" style="white-space:pre-wrap;"
-          >访问地址: <a :href="item.info" target="_blank">{{ item.info }}</a></span
-        >
-        <span v-else v-html="item.info" style="white-space:pre-wrap;"></span>
-        <span v-if="item.type && item.type == 'down'" class="filebtn" @click="download(item.url)"
-          >下载文件</span
-        >
+        <span v-if="item.type == 'url'" style="white-space:pre-wrap;">
+          访问地址:
+          <a :href="item.info" target="_blank">{{ item.info }}</a>
+        </span>
+        <span v-else v-html="helper.downloadFileFormat(item.info)" style="white-space:pre-wrap;"></span>
+        <span
+          v-if="item.type && item.type == 'down'"
+          class="filebtn"
+          @click="download(item.url)"
+        >下载文件</span>
       </p>
-      <slot
-        v-if="item.type && item.type == 'solt'"
-        :name="item.solt_name"
-      ></slot>
+      <slot v-if="item.type && item.type == 'solt'" :name="item.solt_name"></slot>
     </div>
   </div>
 </template>
 <script>
+import helper from "@/services/helper";
 export default {
   data() {
-    return {};
+    return {
+      helper: helper
+    };
   },
   props: ["list_arr"],
   mounted() {
     console.log(this.$slots);
   },
-  methods:{
-      download(val){
-        // this.$emit('download',val)
-        console.log(val);
-        const a = document.createElement('a'); // 创建a标签
-        a.setAttribute('download', '');// download属性
-        a.setAttribute('href', val);// href链接
-        a.click();// 自执行点击事件
-      }
+  methods: {
+    download(val) {
+      // this.$emit('download',val)
+      console.log(val);
+      const a = document.createElement("a"); // 创建a标签
+      a.setAttribute("download", ""); // download属性
+      a.setAttribute("href", val); // href链接
+      a.click(); // 自执行点击事件
+    }
   }
 };
 </script>

src/components/order-list/order-list-cell.vue

@@ -23,18 +23,25 @@
         </div>
       </el-col>
       <el-col :span="6" class="cell_specification">
-        <div>
+        <div v-if="cellItem.order_type == 1">
           <div>规格：日访问次数：{{ cellItem.spec_svc_count }}次，日访问量：{{ cellItem.spec_svc_pv }}</div>
           <div
             class="cell_specification_type"
           >申请方式：{{ cellItem.duration_unit == 1 ? $t('lang.byMonth') : $t('lang.byYear') }}</div>
         </div>
+        <div v-else-if="cellItem.order_type == 2">
+          <div>规格：{{ cellItem.spec_app == 0 ? "申请获取应用镜像部署权限" : "申请获取应用镜像开发权限" }}</div>
+        </div>
+        <div v-else-if="cellItem.order_type == 3">
+          <div>规格：CPU 2核，内存 4GB，容器组 8个；数据盘 3块，每块数据盘容量 2GB</div>
+          <div class="cell_specification_type">单个容器组：CPU最高 4核，默认 2核；内存最高 8 GB，默认 4GB</div>
+        </div>
       </el-col>
       <el-col :span="4" class="approval_status">
         <div>
           <div v-if="cellItem.approval_first_level == 0 &&  cellItem.pay_status != -1">待审核</div>
           <div
-            v-if="cellItem.approval_first_level == 1&& cellItem.approval_second_level == 0 && cellItem.pay_status != -1"
+            v-if="cellItem.approval_first_level == 1 && cellItem.approval_second_level == 0 && cellItem.pay_status != -1"
           >审核中</div>
           <div v-if="cellItem.approval_second_level == 1 && cellItem.pay_status != -1">审核通过</div>
           <div v-if="cellItem.approval_first_level == -1 && cellItem.pay_status != -1">审核未通过</div>

src/components/table/table-input.vue

@@ -58,7 +58,7 @@ import helper from "@/services/helper";
 export default {
   props: {
     item: {
-      type: [String,Number],
+      type: [String, Number],
       default: ""
     },
     header: {
@@ -95,7 +95,8 @@ export default {
     anotherData: {
       directory: "file"
     },
-    inputTextUp: ""
+    inputTextUp: "",
+    helper: helper
   }),
   mounted() {
     this.inputText = this.item;
@@ -118,7 +119,7 @@ export default {
           url: response.data,
           name: response.data
         });
-        this.inputTextUp = file.name;
+        this.inputTextUp = helper.downloadFileFormat(file.name);
         this.$emit("changeUpFile", {
           rowId: this.rowId,
           header: this.header,

src/pages/user/order/order_detail.vue

@@ -89,7 +89,7 @@
       <div class="detail_title">{{ orderDetail.order_type == 1 ? "服务" : "应用"}}信息</div>
       <div class="detail_service">
         <el-row class="detail_service_row">
-          <el-col :span="10" class="detail_service_msg">
+          <el-col :span="10" v-if="orderDetail.order_type == 1" class="detail_service_msg">
             <img :src="orderDetail.cover" class="detail_service_msg_img" />
             <div class="detail_service_msg_right">
               <div class="detail_service_name">
@@ -105,8 +105,28 @@
               </div>
             </div>
           </el-col>
+          <el-col :span="10" v-else-if="orderDetail.order_type == 2" class="detail_service_msg">
+            <img :src="orderDetail.cover" class="detail_service_msg_img" />
+            <div class="detail_service_msg_right">
+              <div class="detail_service_name">
+                <span>{{ orderDetail.name }}</span>
+              </div>
+              <div class="detail_service_msg_other">
+                <div class="detail_service_type">{{ orderDetail.sector }}</div>
+                <div class="detail_service_creator">{{ orderDetail.src_organization }}</div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="10" v-else-if="orderDetail.order_type == 3" class="detail_service_msg">
+            <img :src="orderDetail.cover" class="detail_service_msg_img" />
+            <div class="detail_service_msg_right">
+              <div class="detail_service_name_cloud">
+                <span>{{ orderDetail.name }}</span>
+              </div>
+            </div>
+          </el-col>
           <el-col :span="8" class="detail_service_specification">
-            <div>
+            <div v-if="orderDetail.order_type == 1">
               <div>
                 <span class="detail_service_specification_gg">规格：</span>
                 <span
@@ -120,6 +140,18 @@
                 >{{orderDetail.duration_unit == 1 ? "按月" : "按年"}}</span>
               </div>
             </div>
+            <div v-else-if="orderDetail.order_type == 2">
+              <div>
+                <span class="detail_service_specification_gg">规格：</span>
+                <span class="detail_service_specification_val">申请获取应用镜像部署权限</span>
+              </div>
+            </div>
+            <div v-else-if="orderDetail.order_type == 3">
+              <div>
+                <span class="detail_service_specification_gg">类型：</span>
+                <span class="detail_service_specification_val">申请新的工作区域</span>
+              </div>
+            </div>
           </el-col>
           <el-col :span="6" class="detail_service_time">
             <div>
@@ -131,10 +163,64 @@
           </el-col>
         </el-row>
       </div>
-      <div class="detail_s_title">应用场景：</div>
-      <div class="detail_app_scence">{{ orderDetail.scene }}</div>
-      <div class="detail_s_title">申请内容：</div>
-      <table-um :headers="header_arr" :datas="data"></table-um>
+      <div v-if="orderDetail.order_type == 2">
+        <div class="detail_s_title">应用简介：</div>
+        <div class="detail_app_scence">{{ orderDetail.scene }}</div>
+      </div>
+      <div v-if="orderDetail.order_type == 2">
+        <div class="detail_s_title">功能简介：</div>
+        <div class="detail_app_scence">{{ orderDetail.scene }}</div>
+      </div>
+      <div v-if="orderDetail.order_type == 1 || orderDetail.order_type == 2">
+        <div class="detail_s_title">应用场景：</div>
+        <div class="detail_app_scence">{{ orderDetail.scene }}</div>
+      </div>
+      <div v-if="orderDetail.order_type == 3">
+        <div class="detail_s_title">工作区域描述：</div>
+        <div class="detail_app_scence">{{ orderDetail.scene }}</div>
+      </div>
+      <div v-if="orderDetail.order_type == 3" class="params_block">
+        <span class="params_block_title">申请规格：</span>
+        <div class="params_block_item">
+          <div class="params_block_item_in">
+            <span class="params_block_item_title">CPU：</span>
+            <span class="params_block_item_val">2核</span>
+          </div>
+          <div class="params_block_item_in">
+            <span class="params_block_item_title">内存：</span>
+            <span class="params_block_item_val">4GB</span>
+          </div>
+          <div class="params_block_item_in">
+            <span class="params_block_item_title">容器组：</span>
+            <span class="params_block_item_val">2核</span>
+          </div>
+          <div class="params_block_item_in">
+            <span class="params_block_item_title">数据盘：</span>
+            <span class="params_block_item_val">2核</span>
+          </div>
+        </div>
+        <span class="params_block_title margin_top_20">单个容器组规格：</span>
+        <div class="params_block_item">
+          <div class="params_block_item_in">
+            <span class="params_block_item_title">CPU：</span>
+            <p class="params_block_item_val">
+              <span class="val_has_2">最高&nbsp;2核</span>
+              <span class="val_has_2">默认&nbsp;2核</span>
+            </p>
+          </div>
+          <div class="params_block_item_in">
+            <span class="params_block_item_title">CPU：</span>
+            <p class="params_block_item_val">
+              <span class="val_has_2">最高&nbsp;2核</span>
+              <span class="val_has_2">默认&nbsp;2核</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div v-if="orderDetail.order_type == 1">
+        <div class="detail_s_title">申请内容：</div>
+        <table-um :headers="header_arr" :datas="data"></table-um>
+      </div>
       <div class="detail_title">申请人信息</div>
       <info-list @download="download" :list_arr="list_arr" class="detail_s_val"></info-list>
       <process-card :data="approval_arr1" class="detail_s_val"></process-card>
@@ -512,6 +598,19 @@ export default {
   -webkit-box-orient: vertical;
   font-size: 16px;
 }
+.detail_service_name_cloud {
+  width: 100%;
+  line-height: 24px;
+  margin-top: 50px;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-size: 16px;
+}
 .detail_service_msg_other {
   position: absolute;
   bottom: 2px;
@@ -598,6 +697,42 @@ export default {
   background-color: #e1e4fb;
   color: #626de9;
 }
+.params_block {
+  background-color: #f8f9fd;
+  border-radius: 8px;
+  margin: 10px 0;
+  padding: 20px;
+  font-size: 14px;
+  line-height: 22px;
+}
+.params_block_title {
+  padding-left: 10px;
+  color: #242c43;
+}
+.params_block_item {
+  padding: 10px 0 0 0;
+}
+.params_block_item_in {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+}
+.params_block_item_title {
+  color: #8890a7;
+  width: 120px;
+  text-align: right;
+}
+.params_block_item_val {
+  color: #242c43;
+  width: calc(100% - 130px);
+}
+.val_has_2 {
+  margin-right: 20px;
+}
+.margin_top_20 {
+  display: block;
+  margin-top: 20px;
+}
 </style>
 <style>
 .pop_rate .el-rate__icon {

src/services/helper.js

@@ -54,3 +54,27 @@ module.exports.dateStringTransform = function (date) {
     return date;
   }
 }
+
+module.exports.downloadFileFormat = function (fileUrl) {
+  /* 
+    input: /apaas/static/docs/image/images/1234.png
+    output: 1234.png
+  */
+  if (fileUrl != "") {
+    return fileUrl.substring(fileUrl.lastIndexOf("/") + 1);
+  } else {
+    return "";
+  }
+}
+
+module.exports.numberFormat = function (num, decimals) {
+  /* 
+    input:  10000 1000
+    output: 10    1000
+  */
+  if (num > 10000) {
+    return Math.floor(num / 10000).toFixed(decimals);
+  } else {
+    return num;
+  }
+}
\ No newline at end of file