no message

base-vue/src/views/modules/tickets/detail.vue

@@ -1,89 +1,28 @@
 <template>
   <div class="mod-config">
-    <el-descriptions class="margin-top" title="工单详情" :column="2" :size="size" border>
-      <!-- <template slot="extra">
-        <el-button type="primary" size="small">操作</el-button>
-      </template> -->
-      <el-descriptions-item>
-        <template slot="label">
-          <!-- <i class="el-icon-user"></i> -->
-          工单ID
+    <el-descriptions title="工单详情" direction="vertical" :column="column" size="mini" border>
+      <template slot="extra">
+        <el-button type="primary" size="small">审批</el-button>
       </template>
-        {{ ticketsData.ticketsId }}
+      <el-descriptions-item label="工单ID">
+        <el-tag size="small">{{ ticketsData.ticketsId }}</el-tag>
       </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          小车类型
-        </template>
+      <el-descriptions-item label="小车类型">
         {{ ticketsData.carName }}
       </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          异常类型
-        </template>
+      <el-descriptions-item label="异常类型">
         {{ ticketsData.errorType }}
       </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          合同编号
-        </template>
-        {{ ticketsData.contractNumber }}
-        <!-- <el-tag size="small">学校</el-tag> -->
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          客户
-        </template>
-        {{ ticketsData.clientName }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          故障描述
-        </template>
-        {{ ticketsData.description }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          部门对接人
-        </template>
-        {{ ticketsData.deptPeople }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          客户联系电话
-        </template>
-        {{ ticketsData.deptPhone }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          创建者
-        </template>
-        {{ ticketsData.createUserId }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          创建时间
-        </template>
-        {{ ticketsData.createTime }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          是否验收
-        </template>
-        {{ ['否', '是'][Number(ticketsData.isCheck)] }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          工单状态
-        </template>
-        {{ statusOpt | findByValue(ticketsData.status) }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template slot="label">
-          工单关闭时间
-        </template>
-        {{ ticketsData.updateTime }}
-      </el-descriptions-item>
+      <el-descriptions-item label="合同编号">{{ ticketsData.contractNumber }}</el-descriptions-item>
+      <el-descriptions-item label="客户">{{ ticketsData.clientName }}</el-descriptions-item>
+      <el-descriptions-item label="故障描述">{{ ticketsData.description }}</el-descriptions-item>
+      <el-descriptions-item label="部门对接人">{{ ticketsData.deptPeople }}</el-descriptions-item>
+      <el-descriptions-item label="客户联系电话">{{ ticketsData.deptPhone }}</el-descriptions-item>
+      <el-descriptions-item label="创建者">{{ ticketsData.createUserId }}</el-descriptions-item>
+      <el-descriptions-item label="创建时间">{{ ticketsData.createTime }}</el-descriptions-item>
+      <el-descriptions-item label="是否验收">{{ ['否', '是'][Number(ticketsData.isCheck)] }}</el-descriptions-item>
+      <el-descriptions-item label="工单状态">{{ statusOpt | findByValue(ticketsData.status) }}</el-descriptions-item>
+      <el-descriptions-item label="工单关闭时间">{{ ticketsData.updateTime }}</el-descriptions-item>
     </el-descriptions>
   </div>
 </template>
@@ -92,14 +31,34 @@
   export default {
     data () {
       return {
+        column: 0,
         ticketsData: {},
         statusOpt: [{value: '0', label: '未开始'}, {value: '1', label: '已指派'}, {value: '2', label: '处理中'}, {value: '3', label: '已完成'}]
       }
     },
     created () {
+      if (this.isMobile() || window.innerWidth < 768) {
+        this.column = 2
+      } else {
+        this.column = 4
+      }
       this.getDataList()
     },
     methods: {
+      isMobile() {
+        const userAgentInfo = navigator.userAgent;
+        const mobileAgents = [
+          "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"
+        ];
+        let isMobile = false;
+        for (let i = 0; i < mobileAgents.length; i++) {
+          if (userAgentInfo.indexOf(mobileAgents[i]) > -1) {
+            isMobile = true;
+            break;
+          }
+        }
+        return isMobile;
+      },
       // 获取数据列表
       getDataList () {
         this.$http({
@@ -129,7 +88,7 @@
 
 <style scoped>
 .mod-config {
-  padding: 20px 10px;
+  padding: 30px 30px;
 }
 .el-pagination {
   margin-top: 15px;