vue2-client 1.3.1 → 1.3.4

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

@@ -1,352 +0,0 @@
-<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)" :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,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,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" :details="details" v-if="tabActiveKey === '1'"/>
-          <meter-details-count :userid="userid" v-else-if="tabActiveKey === '2'"/>
-          <meter-details-sell-gas :userid="userid" v-else-if="tabActiveKey === '3'"/>
-          <meter-details-hand-plan :userid="userid" v-else-if="tabActiveKey === '4'"/>
-          <meter-details-exception :userid="userid" v-else-if="tabActiveKey === '5'"/>
-          <meter-details-instruct :userid="userid" v-else-if="tabActiveKey === '6'"/>
-        </template>
-      </a-page-header>
-    </a-spin>
-  </a-drawer>
-</template>
-
-<script>
-import { MeterDetailsMain, MeterDetailsCount, MeterDetailsHandPlan,
-  MeterDetailsSellGas, MeterDetailsException, MeterDetailsInstruct } from '@vue2-client/base-client/components/iot/MeterDetailsView/part'
-import { MeterDetailsViewApi, post } from '@vue2-client/services/api'
-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 || Number,
-      required: true
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    // 初始化组件
-    initView () {
-      this.tabActiveKey = '1'
-      this.getUserFiles(this.userid)
-    },
-    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) {
-      this.loadUserFilesDetails = true
-      return post(MeterDetailsViewApi.getUserFilesDetails, {
-        id: userId
-      })
-        .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) {
-      const _this = this
-      this.$confirm({
-        title: '您确定要对档案进行重新开户吗？',
-        content: '将会在一段时间内重新生成开户指令',
-        okText: '确定',
-        okType: 'danger',
-        cancelText: '取消',
-        onOk () {
-          return post(MeterDetailsViewApi.againOpenAccount, {
-            id: id,
-            username: _this.currUser.username
-          }).then(res => {
-            _this.getUserFiles(id)
-            if (res.nums === 1) {
-              _this.$message.success('操作成功')
-            } else {
-              _this.$message.error('操作失败')
-            }
-          })
-        }
-      })
-    },
-    // 开关阀
-    saveValveControl (id, 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,
-            isOpenValue: isOpen,
-            aliasValue: alias,
-            username: _this.currUser.username
-          }).then(res => {
-            _this.getUserFiles(id)
-            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.js

@@ -1,3 +0,0 @@
-import MeterDetailsView from './MeterDetailsView'
-
-export default MeterDetailsView

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

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