vue2-client 1.2.37-2 → 1.2.40

package/src/base-client/components/iot/CustomerDetailsView/CustomerDetailsView.vue

@@ -1,225 +1,225 @@
-<template>
-  <a-drawer
-    title="客户详情"
-    placement="right"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    :visible="visible"
-    @close="onClose"
-  >
-    <a-spin :spinning="loading">
-      <a-page-header
-        :title="details.f_name"
-      >
-        <div class="row">
-          <div class="content">
-            <a-descriptions size="small" :column="isMobile ? 1 : 2">
-              <a-descriptions-item label="客户编号">{{ details.id }}</a-descriptions-item>
-              <a-descriptions-item label="创建时间">{{ format(details.f_input_date,'yyyy-MM-dd hh:mm:ss') }}</a-descriptions-item>
-              <a-descriptions-item label="所属大区">{{ details.f_region }}</a-descriptions-item>
-              <a-descriptions-item label="系统版本">
-                {{ details.f_system_version }}
-              </a-descriptions-item>
-              <a-descriptions-item label="数据库类型">
-                {{ details.f_data_source }}
-              </a-descriptions-item>
-            </a-descriptions>
-          </div>
-          <div class="extra">
-            <a-row class="status-list">
-              <a-col :xs="12" :sm="24">
-                <div class="text">客户状态</div>
-                <div class="heading">
-                  <x-badge badge-key="customerStateMap" :value="details.f_state" :is-external-text="true"/>
-                </div>
-              </a-col>
-            </a-row>
-            <p></p>
-            <a-row class="status-list">
-              <a-col :xs="12" :sm="24">
-                <div class="text">日志持久化状态</div>
-                <div class="heading">
-                  <x-badge badge-key="logPersistenceStateMap" :value="details.f_log_persistence" :is-external-text="true"/>
-                </div>
-              </a-col>
-            </a-row>
-          </div>
-        </div>
-        <!-- actions -->
-        <template v-slot:extra>
-          <a-button-group style="margin-right: 4px;">
-            <a-button type="dashed" @click="initView" :loading="loading">刷新</a-button>
-          </a-button-group>
-        </template>
-        <!-- 操作 -->
-        <a-card
-          style="margin-top: 24px"
-          :bordered="false"
-          :tabList="operationTabList"
-          :activeTabKey="operationActiveTabKey"
-          @tabChange="(key) => {this.operationActiveTabKey = key}"
-        >
-          <div v-if="operationActiveTabKey === '1'">
-            <a-descriptions layout="vertical" bordered>
-              <a-descriptions-item label="联系方式">{{ details.f_contact }}</a-descriptions-item>
-              <a-descriptions-item label="地址" span="2">{{ details.f_address }}</a-descriptions-item>
-              <a-descriptions-item label="备注">{{ details.f_remark }}</a-descriptions-item>
-            </a-descriptions>
-          </div>
-          <div v-else-if="operationActiveTabKey === '2'" class="no-data"><a-icon type="frown-o"/>暂无数据</div>
-        </a-card>
-      </a-page-header>
-    </a-spin>
-  </a-drawer>
-</template>
-
-<script>
-import { formatDate } from '@vue2-client/utils/util'
-import { CustomerDetailsViewApi, post } from '@vue2-client/services/api'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'CustomerDetailsView',
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // 客户详情
-      details: {
-        id: 0,
-        f_name: '',
-        f_region: '',
-        f_system_version: '',
-        f_contact: '',
-        f_address: '',
-        f_remark: '',
-        f_state: '正常',
-        f_input_date: '',
-        f_data_source: '',
-        f_log_persistence: '支持'
-      },
-      // 是否刷新加载中
-      loading: false,
-      operationTabList: [
-        {
-          key: '1',
-          tab: '基本信息'
-        },
-        {
-          key: '2',
-          tab: '操作日志'
-        }
-      ],
-      operationActiveTabKey: '1'
-    }
-  },
-  mounted () {
-    this.initView()
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
-    customerName: {
-      type: String,
-      required: true
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    // 初始化组件
-    initView () {
-      this.getCustomers(this.customerName)
-    },
-    onClose () {
-      this.$emit('update:visible', false)
-    },
-    getCustomers (customerName) {
-      this.loading = true
-      return post(CustomerDetailsViewApi.getCustomerDetails, {
-        customerName: customerName
-      })
-        .then(res => {
-          res.f_state = res.f_state === '1' ? '正常' : '停用'
-          this.details = res
-          this.loading = false
-        }, err => {
-          this.loading = false
-          console.warn(err)
-        })
-    },
-    format (date, format) {
-      return formatDate(date, format)
-    }
-  },
-  watch: {
-    'visible' (val) {
-      if (val) {
-        this.initView()
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.detail-layout {
-  margin-left: 44px;
-}
-.text {
-  color: rgba(0, 0, 0, .45);
-}
-
-.heading {
-  color: rgba(0, 0, 0, .85);
-  font-size: 20px;
-}
-
-.no-data {
-  color: rgba(0, 0, 0, .25);
-  text-align: center;
-  line-height: 64px;
-  font-size: 16px;
-
-  i {
-    font-size: 24px;
-    margin-right: 16px;
-    position: relative;
-    top: 3px;
-  }
-}
-
-.mobile {
-  .detail-layout {
-    margin-left: unset;
-  }
-  .text {
-
-  }
-  .status-list {
-    text-align: left;
-  }
-}
-
-.row {
-  display: flex;
-
-  .content {
-    -webkit-box-flex: 1;
-    flex: auto;
-    -ms-flex: auto;
-  }
-
-  .extra {
-    flex: 0 1 auto;
-    -webkit-box-flex: 0;
-    -ms-flex: 0 1 auto;
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-</style>
+<template>
+  <a-drawer
+    title="客户详情"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-spin :spinning="loading">
+      <a-page-header
+        :title="details.f_name"
+      >
+        <div class="row">
+          <div class="content">
+            <a-descriptions size="small" :column="isMobile ? 1 : 2">
+              <a-descriptions-item label="客户编号">{{ details.id }}</a-descriptions-item>
+              <a-descriptions-item label="创建时间">{{ format(details.f_input_date,'yyyy-MM-dd hh:mm:ss') }}</a-descriptions-item>
+              <a-descriptions-item label="所属大区">{{ details.f_region }}</a-descriptions-item>
+              <a-descriptions-item label="系统版本">
+                {{ details.f_system_version }}
+              </a-descriptions-item>
+              <a-descriptions-item label="数据库类型">
+                {{ details.f_data_source }}
+              </a-descriptions-item>
+            </a-descriptions>
+          </div>
+          <div class="extra">
+            <a-row class="status-list">
+              <a-col :xs="12" :sm="24">
+                <div class="text">客户状态</div>
+                <div class="heading">
+                  <x-badge badge-key="customerStateMap" :value="details.f_state" :is-external-text="true"/>
+                </div>
+              </a-col>
+            </a-row>
+            <p></p>
+            <a-row class="status-list">
+              <a-col :xs="12" :sm="24">
+                <div class="text">日志持久化状态</div>
+                <div class="heading">
+                  <x-badge badge-key="logPersistenceStateMap" :value="details.f_log_persistence" :is-external-text="true"/>
+                </div>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+        <!-- actions -->
+        <template v-slot:extra>
+          <a-button-group style="margin-right: 4px;">
+            <a-button type="dashed" @click="initView" :loading="loading">刷新</a-button>
+          </a-button-group>
+        </template>
+        <!-- 操作 -->
+        <a-card
+          style="margin-top: 24px"
+          :bordered="false"
+          :tabList="operationTabList"
+          :activeTabKey="operationActiveTabKey"
+          @tabChange="(key) => {this.operationActiveTabKey = key}"
+        >
+          <div v-if="operationActiveTabKey === '1'">
+            <a-descriptions layout="vertical" bordered>
+              <a-descriptions-item label="联系方式">{{ details.f_contact }}</a-descriptions-item>
+              <a-descriptions-item label="地址" span="2">{{ details.f_address }}</a-descriptions-item>
+              <a-descriptions-item label="备注">{{ details.f_remark }}</a-descriptions-item>
+            </a-descriptions>
+          </div>
+          <div v-else-if="operationActiveTabKey === '2'" class="no-data"><a-icon type="frown-o"/>暂无数据</div>
+        </a-card>
+      </a-page-header>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import { formatDate } from '@vue2-client/utils/util'
+import { CustomerDetailsViewApi, post } from '@vue2-client/services/api'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'CustomerDetailsView',
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 客户详情
+      details: {
+        id: 0,
+        f_name: '',
+        f_region: '',
+        f_system_version: '',
+        f_contact: '',
+        f_address: '',
+        f_remark: '',
+        f_state: '正常',
+        f_input_date: '',
+        f_data_source: '',
+        f_log_persistence: '支持'
+      },
+      // 是否刷新加载中
+      loading: false,
+      operationTabList: [
+        {
+          key: '1',
+          tab: '基本信息'
+        },
+        {
+          key: '2',
+          tab: '操作日志'
+        }
+      ],
+      operationActiveTabKey: '1'
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    customerName: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.getCustomers(this.customerName)
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    getCustomers (customerName) {
+      this.loading = true
+      return post(CustomerDetailsViewApi.getCustomerDetails, {
+        customerName: customerName
+      })
+        .then(res => {
+          res.f_state = res.f_state === '1' ? '正常' : '停用'
+          this.details = res
+          this.loading = false
+        }, err => {
+          this.loading = false
+          console.warn(err)
+        })
+    },
+    format (date, format) {
+      return formatDate(date, format)
+    }
+  },
+  watch: {
+    'visible' (val) {
+      if (val) {
+        this.initView()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.detail-layout {
+  margin-left: 44px;
+}
+.text {
+  color: rgba(0, 0, 0, .45);
+}
+
+.heading {
+  color: rgba(0, 0, 0, .85);
+  font-size: 20px;
+}
+
+.no-data {
+  color: rgba(0, 0, 0, .25);
+  text-align: center;
+  line-height: 64px;
+  font-size: 16px;
+
+  i {
+    font-size: 24px;
+    margin-right: 16px;
+    position: relative;
+    top: 3px;
+  }
+}
+
+.mobile {
+  .detail-layout {
+    margin-left: unset;
+  }
+  .text {
+
+  }
+  .status-list {
+    text-align: left;
+  }
+}
+
+.row {
+  display: flex;
+
+  .content {
+    -webkit-box-flex: 1;
+    flex: auto;
+    -ms-flex: auto;
+  }
+
+  .extra {
+    flex: 0 1 auto;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 1 auto;
+    min-width: 242px;
+    margin-left: 88px;
+    text-align: right;
+  }
+}
+</style>