vue2-client 0.1.1 → 1.0.0

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

@@ -0,0 +1,360 @@
+<template>
+  <a-drawer
+    title="档案详情"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-spin :spinning="loadUserFilesDetails">
+      <a-page-header
+        :title="'表号：' + details.f_meternumber"
+      >
+        <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="用户编号">{{ details.f_userinfo_id }}</a-descriptions-item>
+              <a-descriptions-item label="余额">{{ details.f_balance_amount }}</a-descriptions-item>
+              <a-descriptions-item label="网络购气次数">{{ details.f_iot_times }}</a-descriptions-item>
+              <a-descriptions-item label="总购金额">{{ details.f_total_fee }}</a-descriptions-item>
+              <a-descriptions-item label="总购气量">{{ details.f_total_gas }}</a-descriptions-item>
+              <a-descriptions-item label="气表品牌别名">{{ details.f_alias }}</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 :value="details.f_sendsuccess" badge-key="openAccountStateMap" :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 :value="details.f_table_state" badge-key="tableStateMap" :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="loadUserFilesDetails">刷新</a-button>
+          </a-button-group>
+          <a-button-group style="margin-right: 4px;">
+            <a-popover title="重新开户" placement="bottomLeft">
+              <template slot="content">
+                <p>将档案标记为未开户状态</p>
+                <p>指令将在 定时器轮询/表具上报 后重新生成</p>
+                <p style="color: red">此操作不可撤销</p>
+              </template>
+              <a-button type="primary" class="business" @click="againOpenAccount(details.id,selectOrgName)" :disabled="againOpenAccountBtnHide()">重新开户</a-button>
+            </a-popover>
+            <a-popover title="开阀" placement="bottomLeft">
+              <template slot="content">
+                <p>对表具生成<span style="color: red;font-weight: bold">开阀</span>指令</p>
+                <p>只有已经开户的表具才可以进行该操作</p>
+                <p>操作后，可以在指令维护界面取消发送</p>
+              </template>
+              <a-button type="primary" @click="saveValveControl(details.id,selectOrgName,1,details.f_alias)" :disabled="saveValveControlBtnHide()">开阀</a-button>
+            </a-popover>
+            <a-popover title="关阀" placement="bottomLeft">
+              <template slot="content">
+                <p>对表具生成<span style="color: red;font-weight: bold">关阀</span>指令，请谨慎操作</p>
+                <p>只有已经开户的表具才可以进行该操作</p>
+                <p>操作后，可以在指令维护界面取消发送</p>
+              </template>
+              <a-button type="danger" @click="saveValveControl(details.id,selectOrgName,0,details.f_alias)" :disabled="saveValveControlBtnHide()">关阀</a-button>
+            </a-popover>
+          </a-button-group>
+        </template>
+        <template slot="footer">
+          <a-tabs :default-active-key="tabActiveKey" :activeKey="tabActiveKey" @change="handleTabChange" style="margin-bottom: 23px;">
+            <template v-for="value in tabList">
+              <a-tab-pane :key="value.key" :tab="value.tab"/>
+            </template>
+          </a-tabs>
+          <meter-details-main :userid="userid" :select-org-name="selectOrgName" :details="details" v-if="tabActiveKey === '1'"/>
+          <meter-details-count :userid="userid" :select-org-name="selectOrgName" v-else-if="tabActiveKey === '2'"/>
+          <meter-details-sell-gas :userid="userid" :select-org-name="selectOrgName" v-else-if="tabActiveKey === '3'"/>
+          <meter-details-hand-plan :userid="userid" :select-org-name="selectOrgName" v-else-if="tabActiveKey === '4'"/>
+          <meter-details-exception :userid="userid" :select-org-name="selectOrgName" v-else-if="tabActiveKey === '5'"/>
+          <meter-details-instruct :userid="userid" :select-org-name="selectOrgName" v-else-if="tabActiveKey === '6'"/>
+        </template>
+      </a-page-header>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import { MeterDetailsMain, MeterDetailsCount, MeterDetailsHandPlan,
+  MeterDetailsSellGas, MeterDetailsException, MeterDetailsInstruct } from '@/base-client/components/iot/MeterDetailsView/part'
+import { MeterDetailsViewApi } from '@/services/api/MeterDetailsViewApi'
+import { post } from '@/services/api/restTools'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'MeterDetailsView',
+  components: {
+    MeterDetailsMain,
+    MeterDetailsCount,
+    MeterDetailsHandPlan,
+    MeterDetailsSellGas,
+    MeterDetailsException,
+    MeterDetailsInstruct
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // Tab页签
+      tabActiveKey: '1',
+      // 档案详情
+      details: {
+        id: 0,
+        f_userinfo_id: 0,
+        f_meternumber: '',
+        f_balance_amount: 0,
+        f_meter_base: 0,
+        f_times: 0,
+        f_total_fee: 0,
+        f_total_gas: 0,
+        f_table_state: '正常',
+        f_alias: '',
+        f_sendsuccess: '未同步',
+        f_meter_brand: '',
+        f_meter_type: '',
+        f_meter_style: '',
+        f_type: ''
+      },
+      tabList: [
+        { key: '1', tab: '基础' },
+        { key: '2', tab: '统计' },
+        { key: '3', tab: '充值' },
+        { key: '4', tab: '抄表' },
+        { key: '5', tab: '异常' },
+        { key: '6', tab: '指令' }
+      ],
+      // 档案详情加载
+      loadUserFilesDetails: true
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    userid: {
+      type: String,
+      required: true
+    },
+    selectOrgName: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.tabActiveKey = '1'
+      this.getUserFiles(this.userid, this.selectOrgName)
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    // 通用徽标过滤器
+    badgeFilter (key, value) {
+      const object = this.$appdata.getParam(key)
+      if (object.hasOwnProperty(value)) {
+        return object[value]
+      } else {
+        return {
+          'status': 'default',
+          'text': '未知类型：' + value
+        }
+      }
+    },
+    // 获取档案详情信息
+    getUserFiles (userId, selectOrgName) {
+      this.loadUserFilesDetails = true
+      return post(MeterDetailsViewApi.getUserFilesDetails, {
+        id: userId,
+        orgName: selectOrgName
+      })
+        .then(res => {
+          if (res.f_sendsuccess === undefined) {
+            res.f_sendsuccess = '未同步'
+          }
+          this.details = res
+          this.loadUserFilesDetails = false
+        }, err => {
+          this.loadUserFilesDetails = false
+          console.error(err)
+        })
+    },
+    // Tab切换
+    handleTabChange (key) {
+      this.tabActiveKey = key
+    },
+    // 重新开户
+    againOpenAccount (id, selectOrgName) {
+      const _this = this
+      this.$confirm({
+        title: '您确定要对档案进行重新开户吗？',
+        content: '将会在一段时间内重新生成开户指令',
+        okText: '确定',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk () {
+          return post(MeterDetailsViewApi.againOpenAccount, {
+            id: id,
+            orgName: selectOrgName,
+            username: _this.currUser.username
+          }).then(res => {
+            _this.getUserFiles(id, selectOrgName)
+            if (res.nums === 1) {
+              _this.$message.success('操作成功')
+            } else {
+              _this.$message.error('操作失败')
+            }
+          })
+        }
+      })
+    },
+    // 开关阀
+    saveValveControl (id, selectOrgName, isOpen, alias) {
+      const _this = this
+      let type
+      if (isOpen === 1) {
+        type = '开阀'
+      } else {
+        type = '关阀'
+      }
+      this.$confirm({
+        title: '您确定要对档案生成' + type + '指令吗?',
+        content: '生成指令后，可以在指令维护界面查看和操作',
+        okText: '确定',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk () {
+          return post(MeterDetailsViewApi.saveValveControl, {
+            id: id,
+            orgName: selectOrgName,
+            isOpenValue: isOpen,
+            aliasValue: alias,
+            username: _this.currUser.username
+          }).then(res => {
+            _this.getUserFiles(id, selectOrgName)
+            if (res.nums > 0) {
+              _this.$message.success('生成成功')
+            } else {
+              _this.$message.error('生成失败')
+            }
+          })
+        }
+      })
+    },
+    // 控制重新开户按钮的显示
+    againOpenAccountBtnHide () {
+      return this.details.f_sendsuccess === '未同步' || this.details.f_table_state !== '正常'
+    },
+    // 控制开关阀按钮的显示
+    saveValveControlBtnHide () {
+      return this.details.f_sendsuccess !== '成功' || this.details.f_table_state !== '正常'
+    }
+  },
+  watch: {
+    'visible' (val) {
+      if (val) {
+        this.initView()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.business {
+  color: #ffffff;
+}
+.business:enabled:hover {
+  background-color: #85CE61 !important;
+  border-color: #85CE61 !important;
+}
+.business:enabled {
+  background-color: #67c23a;
+  border-color: #67c23a;
+}
+.business:disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+.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>

package/src/base-client/components/iot/MeterDetailsView/index.md

@@ -0,0 +1,43 @@
+# MeterDetailsView 档案详情页
+
+提供一个可以对单个表具档案进行一系列通用业务操作的抽屉实现
+
+
+
+## 何时使用
+
+允许用户对单个表具档案进行一系列通用业务操作，常用于作为表具详情页的通用实现。
+
+
+
+引用方式：
+
+```javascript
+import MeterDetailsView from '@/base-client/components/MeterDetailsView'
+
+export default {
+    components: {
+      MeterDetailsView
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<meter-details-view
+  :visible.sync="detailVisible"
+  :select-org-name="selectOrgName"
+  :userid="selectUserId"
+  v-if="selectUserId" />
+```
+
+## API
+
+| 参数            | 说明      | 类型      | 默认值   |
+|---------------|---------|---------|-------|
+| visible       | 是否显示    | Boolean | false |
+| selectOrgName | 燃气公司客户名 | String  | null  |
+| userid        | 表档案ID   | String  | null  |