askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/assetMessage.vue

@@ -1,229 +1,232 @@
-<template>
-  <div class="asset-details">
-    <div class="details-content">
-      <img
-        class="backgroundImg"
-        v-if="dataDetails.product.productImgPathes"
-        :src="dataDetails.product.productImgPathes"
-        alt=""
-      />
-      <div class="background-null" v-else>
-        {{ dataDetails.productName[0] | filterName }}
-      </div>
-      <div class="content-text">
-        <p class="text-title">{{ dataDetails.productName }}</p>
-        <section class="text-label">
-          <p class="text-type">
-            <i class="iconfont guoran-biaoqian"></i>
-            <span>{{
-              dataDetails.typeName ? dataDetails.typeName : "--"
-            }}</span>
-          </p>
-          <p class="text-SN">
-            <i class="iconfont guoran-xinghao"></i>
-            <span>{{ dataDetails.snNo ? dataDetails.snNo : "--" }}</span>
-          </p>
-        </section>
-      </div>
-    </div>
-    <div class="details-content-hide">
-      <p>
-        <i class="iconfont guoran-miaoshu"></i>
-        <span>描述</span>
-        <b>{{ dataDetails.description }}</b>
-      </p>
-      <p>
-        <i class="arsenal_icon arsenalweizhi"></i>
-        <span>位置</span>
-        <b> {{ dataDetails.officeAreaName }} </b>
-      </p>
-      <p>
-        <i class="iconfont guoran-geren"></i>
-        <span>使用者</span>
-        <b>
-          {{
-            dataDetails.userName && dataDetails.userName.length != 0
-              ? dataDetails.userName[0]
-              : "--"
-          }}
-        </b>
-      </p>
-      <p>
-        <i class="iconfont guoran-bumen"></i>
-        <span>部门</span>
-        <b>
-          {{
-            dataDetails.deptNames && dataDetails.deptNames.length != 0
-              ? dataDetails.deptNames[0]
-              : "--"
-          }}
-        </b>
-      </p>
-      <p>
-        <i class="iconfont guoran-guanlizhe"></i>
-        <span>管理者</span>
-        <b>
-          {{
-            dataDetails.managerNames && dataDetails.managerNames.length != 0
-              ? dataDetails.managerNames[0]
-              : "--"
-          }}
-        </b>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-    },
-  },
-  data() {
-    return {
-    };
-  },
-  filters: {
-    filterName(value) {
-      let str = "";
-      let reg =
-        /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/;
-      if (reg.test(value[0])) {
-        str = value[0];
-      } else {
-        str = value[0] + value[1];
-      }
-      return str;
-    },
-  },
-  computed: {
-    dataDetails() {
-      let dataDetails = this.data;
-        let reg = /<\/?.+?\/?>/g;
-        dataDetails.description = this.data.description
-          ? this.data.description.replace(reg, "")
-          : "";
-      return dataDetails;
-    },
-  }
-};
-</script>
-
-<style lang="less" scoped>
-@import url("../assets/less/iconfont.css");
-.asset-details {
-  width: 100%;
-  height: 100vh;
-  box-sizing: border-box;
-  background: #ffffff;
-  padding: 15px;
-  .details-content {
-    width: 100%;
-    height: 120px;
-    box-sizing: border-box;
-    padding: 15px 15px;
-    display: flex;
-    align-items: center;
-    .backgroundImg {
-      width: 80px;
-      height: 80px;
-      margin-right: 15px;
-    }
-    .background-null {
-      width: 80px;
-      height: 80px;
-      background: #366aff;
-      border-radius: 51px;
-      line-height: 80px;
-      text-align: center;
-      font-size: 34px;
-      color: #ffffff;
-      margin-right: 15px;
-    }
-    .content-text {
-      width: calc(100% - 90px);
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      .text-title {
-        width: 100%;
-        font-weight: bold;
-        color: #000000;
-        font-size: 15px;
-        text-overflow: hidden;
-      }
-      .text-label {
-        width: 100%;
-        display: flex;
-        p {
-          margin-right: 10px;
-          display: flex;
-          align-items: center;
-          i {
-            margin-right: 3px;
-          }
-        }
-        .text-type {
-          background: #e1faf9;
-          box-sizing: border-box;
-          padding: 3px 5px;
-          i {
-            color: #00c2bb;
-          }
-          span {
-            color: #00c2bb;
-          }
-        }
-        .text-SN {
-          background: #edf2ff;
-          box-sizing: border-box;
-          padding: 3px 5px;
-          i {
-            color: #366aff;
-          }
-          span {
-            color: #366aff;
-          }
-        }
-      }
-    }
-  }
-  .details-content-hide {
-    width: 100%;
-    height: auto;
-    min-height: 194px;
-    box-sizing: border-box;
-    padding: 20px 15px;
-    background: #f6f8fd;
-    border-radius: 17px;
-    p {
-      min-height: 20px;
-      height: auto;
-      margin-bottom: 10px;
-      display: flex;
-      align-items: flex-start;
-      font-size: 16px;
-      i {
-        font-size: 14px;
-        color: #a9b3c6;
-      }
-      span {
-        width: 60px;
-        color: #a9b3c6;
-        margin-left: 10px;
-        line-height: 16px;
-      }
-      b {
-        line-height: 16px;
-        flex: 1 0;
-        color: #000000;
-        font-weight: 400;
-        word-break: break-all;
-      }
-    }
-  }
-}
+<template>
+  <div class="asset-details">
+    <div class="details-content">
+      <img
+        class="backgroundImg"
+        v-if="dataDetails.product.productImgPathes"
+        :src="dataDetails.product.productImgPathes"
+        alt=""
+      />
+      <div class="background-null" v-else>
+        {{ dataDetails.productName[0] | filterName }}
+      </div>
+      <div class="content-text">
+        <p class="text-title">{{ dataDetails.productName }}</p>
+        <section class="text-label">
+          <p class="text-type">
+            <i class="iconfont guoran-biaoqian"></i>
+            <span>{{ dataDetails.typeName ? dataDetails.typeName : "--" }}</span>
+          </p>
+          <p class="text-SN">
+            <i class="iconfont guoran-xinghao"></i>
+            <span>{{ dataDetails.snNo ? dataDetails.snNo : "--" }}</span>
+          </p>
+        </section>
+      </div>
+    </div>
+    <div class="details-content-hide">
+      <p>
+        <i class="iconfont guoran-miaoshu"></i>
+        <span>{{ $t('dragonCommon.description') }}</span>
+        <b>{{ dataDetails.description }}</b>
+      </p>
+      <p>
+        <i class="arsenal_icon arsenalweizhi"></i>
+        <span>{{ $t('dragonCommon.location') }}</span>
+        <b>{{ dataDetails.officeAreaName }}</b>
+      </p>
+      <p>
+        <i class="iconfont guoran-geren"></i>
+        <span>{{ $t('dragonCommon.user') }}</span>
+        <b>
+          {{
+            dataDetails.userName && dataDetails.userName.length !== 0
+              ? dataDetails.userName[0]
+              : "--"
+          }}
+        </b>
+      </p>
+      <p>
+        <i class="iconfont guoran-bumen"></i>
+        <span>{{ $t('dragonCommon.department') }}</span>
+        <b>
+          {{
+            dataDetails.deptNames && dataDetails.deptNames.length !== 0
+              ? dataDetails.deptNames[0]
+              : "--"
+          }}
+        </b>
+      </p>
+      <p>
+        <i class="iconfont guoran-guanlizhe"></i>
+        <span>{{ $t('dragonCommon.manager') }}</span>
+        <b>
+          {{
+            dataDetails.managerNames && dataDetails.managerNames.length !== 0
+              ? dataDetails.managerNames[0]
+              : "--"
+          }}
+        </b>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+    };
+  },
+  filters: {
+    filterName(value) {
+      let str = "";
+      let reg =
+        /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/;
+      if (reg.test(value[0])) {
+        str = value[0];
+      } else {
+        str = value[0] + value[1];
+      }
+      return str;
+    },
+  },
+  computed: {
+    dataDetails() {
+      let dataDetails = this.data;
+        let reg = /<\/?.+?\/?>/g;
+        dataDetails.description = this.data.description
+          ? this.data.description.replace(reg, "")
+          : "";
+      return dataDetails;
+    },
+  },
+  mounted() {
+    this.$i18n.locale = sessionStorage.getItem("systemLanguage") || 'cn';
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import url("../assets/less/iconfont.css");
+@import "../assets/less/variables.less";
+
+.asset-details {
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  background: @background-color-light;
+  padding: 15px;
+  .details-content {
+    width: 100%;
+    height: 120px;
+    box-sizing: border-box;
+    padding: 15px 15px;
+    display: flex;
+    align-items: center;
+    .backgroundImg {
+      width: 80px;
+      height: 80px;
+      margin-right: 15px;
+    }
+    .background-null {
+      width: 80px;
+      height: 80px;
+      background: @primary-color;
+      border-radius: 51px;
+      line-height: 80px;
+      text-align: center;
+      font-size: 34px;
+      color: @font-primary-light-color;
+      margin-right: 15px;
+    }
+    .content-text {
+      width: calc(100% - 90px);
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      .text-title {
+        width: 100%;
+        font-weight: bold;
+        color: @font-primary-color;
+        font-size: 15px;
+        text-overflow: hidden;
+      }
+      .text-label {
+        width: 100%;
+        display: flex;
+        p {
+          margin-right: 10px;
+          display: flex;
+          align-items: center;
+          i {
+            margin-right: 3px;
+          }
+        }
+        .text-type {
+          background: @background-color-asset-text-r1;
+          box-sizing: border-box;
+          padding: 3px 5px;
+          i {
+            color: @font-alc-color;
+          }
+          span {
+            color: @font-alc-color;
+          }
+        }
+        .text-SN {
+          background: @background-color-asset-text-r2;
+          box-sizing: border-box;
+          padding: 3px 5px;
+          i {
+            color: @font-primary-accent-color;
+          }
+          span {
+            color: @font-primary-accent-color;
+          }
+        }
+      }
+    }
+  }
+  .details-content-hide {
+    width: 100%;
+    height: auto;
+    min-height: 194px;
+    box-sizing: border-box;
+    padding: 20px 15px;
+    background: #f6f8fd;
+    border-radius: 17px;
+    p {
+      min-height: 20px;
+      height: auto;
+      margin-bottom: 10px;
+      display: flex;
+      align-items: flex-start;
+      font-size: 16px;
+      i {
+        font-size: 14px;
+        color: @font-primary-color-r4;
+      }
+      span {
+        width: 60px;
+        color: @font-primary-color-r4;
+        margin-left: 10px;
+        line-height: 16px;
+      }
+      b {
+        line-height: 16px;
+        flex: 1 0;
+        color: @font-primary-color;
+        font-weight: 400;
+        word-break: break-all;
+      }
+    }
+  }
+}
 </style>