vue2-client 0.1.1 → 1.0.0

package/src/components/MeterDetailsView/MeterDetailsView.vue

@@ -1,317 +0,0 @@
-<template>
-  <a-drawer
-    title="档案详情"
-    placement="right"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    :visible="visible"
-    @close="onClose"
-  >
-    <page-header-wrapper
-      :title="'姓名：' + details.f_user_name"
-      :tab-list="tabList"
-      :tab-active-key="tabActiveKey"
-      :tab-change="handleTabChange"
-      :breadcrumb="false"
-    >
-      <template v-slot:content>
-        <a-descriptions size="small" :column="isMobile ? 1 : 2">
-          <a-descriptions-item label="用户编号" :span="isMobile ? 1 : 2">{{ details.f_userinfo_code }}</a-descriptions-item>
-          <a-descriptions-item label="用户地址">{{ details.f_address }}</a-descriptions-item>
-          <a-descriptions-item label="表编号">{{ details.id }}</a-descriptions-item>
-          <a-descriptions-item label="剩余气量">{{ details.f_balance_gas }}</a-descriptions-item>
-          <a-descriptions-item label="累计用气金额">{{ details.f_total_usegas_amount }}</a-descriptions-item>
-          <a-descriptions-item label="卡购气次数">{{ details.f_times }}</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>
-      </template>
-
-      <!-- actions -->
-      <template v-slot:extra>
-        <a-button-group style="margin-right: 4px;">
-          <a-button type="dashed" @click="getUserFiles(details.id)" :loading="loading">刷新</a-button>
-        </a-button-group>
-        <a-button-group style="margin-right: 4px;">
-          <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(1)" :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(0)" :disabled="saveValveControlBtnHide()">关阀</a-button>
-          </a-popover>
-        </a-button-group>
-      </template>
-      <template v-slot:extraContent>
-        <a-row class="status-list">
-          <a-col :xs="12" :sm="24">
-            <div class="text">开户状态</div>
-            <div class="heading">
-              <a-badge
-                :status="details.f_sendsuccess | openAccountStatusTypeFilter"/>
-              {{ details.f_sendsuccess }}
-            </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">
-              <a-badge
-                :status="details.f_table_state | userFilesStatusTypeFilter"/>
-              {{ details.f_table_state }}
-            </div>
-          </a-col>
-        </a-row>
-      </template>
-      <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'"/>
-    </page-header-wrapper>
-  </a-drawer>
-</template>
-
-<script>
-  import Vue from 'vue'
-  import { businessApi } from '@/vue2-client/api/business'
-  import { STable, Ellipsis } from '@/components'
-  import { MeterDetailsMain, MeterDetailsCount, MeterDetailsHandPlan,
-    MeterDetailsSellGas, MeterDetailsException, MeterDetailsInstruct } from '@/vue2-client/components/MeterDetailsView/part'
-  import { baseMixin } from '@/store/app-mixin'
-
-  const userFilesStatusMap = {
-    '正常': {
-      status: 'success',
-      text: '正常'
-    },
-    '停用': {
-      status: 'default',
-      text: '停用'
-    },
-    '销户': {
-      status: 'error',
-      text: '销户'
-    },
-    '换表': {
-      status: 'error',
-      text: '换表'
-    },
-    '过户': {
-      status: 'error',
-      text: '过户'
-    }
-  }
-
-  const openAccountStatusMap = {
-    '成功': {
-      status: 'success',
-      text: '成功'
-    },
-    '待执行': {
-      status: 'processing',
-      text: '待执行'
-    },
-    '未同步': {
-      status: 'default',
-      text: '未同步'
-    }
-  }
-
-  export default {
-    name: 'MeterDetailsView',
-    components: {
-      STable,
-      Ellipsis,
-      MeterDetailsMain,
-      MeterDetailsCount,
-      MeterDetailsHandPlan,
-      MeterDetailsSellGas,
-      MeterDetailsException,
-      MeterDetailsInstruct
-    },
-    mixins: [baseMixin],
-    data () {
-      return {
-        // 页面宽度
-        screenWidth: document.documentElement.clientWidth,
-        // Tab页签
-        tabActiveKey: '1',
-        // 档案详情
-        details: {
-          id: '-',
-          f_meternumber: '-',
-          f_balance_amount: '-',
-          f_balance_gas: '-',
-          f_user_name: '-',
-          f_address: '-',
-          f_meter_base: '-',
-          f_total_usegas_amount: '-',
-          f_times: '-',
-          f_iot_times: '-',
-          f_total_fee: '-',
-          f_total_gas: '-',
-          f_table_state: '正常',
-          f_alias: '-',
-          f_meter_brand: '-',
-          f_meter_type: '-',
-          f_meter_style: '-',
-          f_type: '-',
-          f_sendsuccess: '未成功'
-        },
-        // 刷新按钮加载状态
-        loading: false,
-        tabList: [
-          { key: '1', tab: '基础' },
-          { key: '2', tab: '统计' },
-          { key: '3', tab: '充值' },
-          { key: '4', tab: '抄表' },
-          { key: '5', tab: '异常' },
-          { key: '6', tab: '指令' }
-        ]
-      }
-    },
-    mounted () {
-      this.tabActiveKey = '1'
-      this.getUserFiles(this.userid)
-      this.user = this.userInfo
-    },
-    computed: {
-      userInfo () {
-        return this.$store.getters.userInfo
-      }
-    },
-    filters: {
-      userFilesStatusTypeFilter (type) {
-        return userFilesStatusMap[type].status
-      },
-      openAccountStatusTypeFilter (type) {
-        return openAccountStatusMap[type].status
-      }
-    },
-    props: {
-      userid: {
-        type: String,
-        required: true
-      },
-      visible: {
-        type: Boolean,
-        default: false
-      }
-    },
-    methods: {
-      onClose () {
-        this.$emit('update:visible', false)
-      },
-      getUserFiles (userId) {
-        this.loading = true
-        return Vue.resetpost(businessApi.meterManageDetail, { id: userId }).then(res => {
-            if (res.f_sendsuccess === undefined) {
-              res.f_sendsuccess = '未成功'
-            }
-            this.details = res
-            this.loading = false
-          }, err => {
-            this.loading = false
-            console.error(err)
-          })
-      },
-      handleTabChange (key) {
-        this.tabActiveKey = key
-      },
-      saveValveControl (isOpen) {
-        const _this = this
-        let type
-        if (isOpen === 1) {
-          type = '开阀'
-        } else {
-          type = '关阀'
-        }
-        this.$confirm({
-          title: '您确定要对档案生成' + type + '指令吗?',
-          content: '生成指令后，可以在指令维护界面查看和操作',
-          okText: '确定',
-          okType: 'danger',
-          cancelText: '取消',
-          onOk () {
-            return Vue.resetpost(businessApi.saveValveControl, {
-              id: _this.details.id,
-              isOpenValue: isOpen,
-              aliasValue: _this.details.f_alias,
-              username: _this.user.username
-            }).then(res => {
-              _this.getUserFiles(_this.details.id)
-              if (res.nums > 0) {
-                _this.$message.success('生成成功')
-              } else {
-                _this.$message.error('生成失败')
-              }
-            })
-          }
-        })
-      },
-      saveValveControlBtnHide () {
-        return this.details.f_sendsuccess !== '成功' || this.details.f_table_state !== '正常'
-      }
-    },
-    watch: {
-      'userid' (val) {
-        this.tabActiveKey = '1'
-        this.getUserFiles(this.userid)
-        this.user = this.userInfo
-      }
-    }
-  }
-</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;
-  }
-}
-</style>

package/src/components/MeterDetailsView/index.md

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

package/src/components/MeterDetailsView/part/index.js

@@ -1,9 +0,0 @@
-import MeterDetailsMain from '@/vue2-client/components/MeterDetailsView/part/MeterDetailsMain'
-import MeterDetailsCount from '@/vue2-client/components/MeterDetailsView/part/MeterDetailsCount'
-import MeterDetailsHandPlan from '@/vue2-client/components/MeterDetailsView/part/MeterDetailsHandPlan'
-import MeterDetailsSellGas from '@/vue2-client/components/MeterDetailsView/part/MeterDetailsSellGas'
-import MeterDetailsException from '@/vue2-client/components/MeterDetailsView/part/MeterDetailsException'
-import MeterDetailsInstruct from '@/vue2-client/components/MeterDetailsView/part/MeterDetailsInstruct'
-
-export { MeterDetailsMain, MeterDetailsCount, MeterDetailsHandPlan, MeterDetailsSellGas,
-  MeterDetailsException, MeterDetailsInstruct }

package/src/components/ModalView/Modal.vue

@@ -1,100 +0,0 @@
-<template>
-  <a-modal
-    :visible="show"
-    :title="title"
-    :ok-button-props="{ props: { disabled: !confirmShow } }"
-    :cancel-button-props="{ props: { disabled: !cancelShow } }"
-    :closable="closable"
-    :width="width"
-    :okText="okText"
-    :cancelText="cancelText"
-    :destroyOnClose="destroyOnClose"
-    :confirmLoading="confirmLoading"
-    :afterClose="afterClose"
-    @ok="handleOk"
-    :maskClosable="maskClosable"
-    @cancel="close"
-  >
-    <div class="auto">
-      <slot name="modal-body">
-      </slot>
-    </div>
-    <template slot="footer">
-      <slot name="modal-footer">
-      </slot>
-    </template>
-  </a-modal>
-</template>
-
-<script>
-  export default {
-    props: {
-      // 标题
-      title: {
-        type: String,
-        default: ''
-      },
-      // 控制modal是否显示
-      show: {
-        require: true,
-        type: Boolean,
-        default: false
-      },
-      // 宽度，如200px
-      width: {
-        type: String,
-        default: '660px'
-      },
-      // 确认按钮是否能点击
-      confirmShow: {
-        type: Boolean,
-        default: true
-      },
-      // 取消按钮是否能点击
-      cancelShow: {
-        type: Boolean,
-        default: true
-      },
-      closable: {
-        type: Boolean,
-        default: true
-      },
-      okText: {
-        type: String,
-        default: '确认'
-      },
-      cancelText: {
-        type: String,
-        default: '取消'
-      },
-      // 确定按钮 loading
-      confirmLoading: {
-        type: Boolean,
-        default: false
-      },
-      // 关闭时销毁 Modal 里的子元素
-      destroyOnClose: {
-        type: Boolean,
-        default: false
-      },
-      // 点击蒙版是否关闭
-      maskClosable: {
-        type: Boolean,
-        default: false
-      }
-    },
-    computed: {
-    },
-    methods: {
-      close () {
-        this.$emit('close')
-      },
-      'handleOk' () {
-        this.$emit('confirm')
-      },
-      afterClose () {
-        this.$emit('after-close')
-      }
-    }
-  }
-</script>

package/src/components/ModalView/index.js

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

package/src/components/WCriteria/WCriteria.vue

@@ -1,191 +0,0 @@
-<template>
-  <div id="Criteria" class="table-page-search-wrapper">
-    <div v-show="criteriaShow" ref="drawerContainer"></div>
-    <a-form-model :model="model" layout="inline">
-      <a-row :gutter="24">
-        <a-col :sm="24" :md="12" :xl="6">
-          <slot name="condition1" :model="model"></slot>
-        </a-col>
-        <a-col :sm="24" :md="12" :xl="6">
-          <slot name="condition2" :model="model"></slot>
-        </a-col>
-        <a-col :md="24" :xl="12">
-          <span class="table-page-search-submitButtons">
-            <a-drawer
-              title="详细筛选"
-              placement="top"
-              :visible="criteriaShow"
-              :get-container="() => {return $refs.drawerContainer}"
-              :wrap-style="{ position: 'absolute' }"
-              :header-style="{textAlign: 'center'}"
-              @close="closeDrawer()">
-              <a-form-model :model="model" layout="inline">
-                <a-row :gutter="24">
-                  <slot name="conditionMore" :model="model"></slot>
-                </a-row>
-              </a-form-model>
-            </a-drawer>
-            <a-space>
-              <a-button type="dashed" class="detailed-condition" v-if="showDetailed" @click="showDrawer()" @click.once="initialLoadCondition()">详细筛选</a-button>
-              <a-button type="primary" :icon="searchIcon" @click="search()">查询</a-button>
-              <a-button :icon="redoIcon" @click="clear()">重置</a-button>
-              <slot name="button"></slot>
-            </a-space>
-          </span>
-        </a-col>
-      </a-row>
-    </a-form-model>
-  </div>
-</template>
-
-<script>
-  export default {
-    props: {
-      // 控制是否显示详细查询
-      showDetailed: {
-        type: Boolean,
-        default: true
-      },
-      // 搜索图标 如需加图标 直接穿字符串值就行 如  <criteria search-icon="search">
-      searchIcon: {
-        type: String,
-        default: 'search'
-      },
-      // 重置图标 如需加图标 直接穿字符串值就行 如  <criteria redo-icon="redo">
-      redoIcon: {
-        type: String,
-        default: 'redo'
-      }
-    },
-    mounted () {
-      this.initialLoadCondition()
-    },
-    data () {
-      return {
-        // 保存用户输入的数据
-        model: {},
-        // 配置的条件内容
-        conditions: {},
-        // 最终产生的查询条件
-        condition: '',
-        // 用于验证的字符数组
-        character: ['and', 'exec', 'insert', 'select', 'delete', 'update', 'count', 'chr', 'mid', 'master', 'truncate', 'char', 'declare'],
-        // 控制多余查询条件显示与否
-        criteriaShow: false
-      }
-    },
-    methods: {
-      // 初始化组件条件, 从标签取查询条件
-      initialLoadCondition () {
-        const elements = this.$el.querySelectorAll('[variable]')
-        console.log(elements)
-        for (let i = 0; i < elements.length; i++) {
-          const el = elements[i]
-          const name = el.getAttribute('variable')
-          this.$set(this.model, name, '')
-
-          const condition = el.getAttribute('condition')
-          if (condition) {
-            // this.conditions放的是查询条件
-            this.conditions[name] = condition
-          }
-        }
-      },
-      search () {
-        try {
-          // 拼接前台条件
-          this.condition = this.buildFrontCondition()
-          const args = { condition: this.condition, model: this.model }
-          this.$emit('condition-changed', args)
-          return args
-        } catch (e) {
-          // 如果是查询条件非法，警告
-          if (e === '查询条件包含非法字符,请重输') {
-            alert('查询条件包含非法字符,请重输')
-          } else {
-            throw e
-          }
-        }
-      },
-      // 拼接前台条件
-      buildFrontCondition () {
-        let condition = ' 1=1 '
-        for (const name in this.conditions) {
-          if (typeof this.model[name] == 'string') {
-            this.model[name] = String(this.model[name]).trim()
-          }
-          const value = this.model[name]
-          // 检查是否包含敏感的SQL字符
-          if (this.checkValue(value)) {
-            /*eslint-disable */
-            throw '查询条件包含非法字符,请重输'
-          }
-          if (this.conditions[name].includes('$parent') && value && (value + '').length > 0) {
-            const sqlStr = this.getSql(value, this.conditions[name])
-            if (sqlStr) {
-              condition += ' and ' + sqlStr.split('{}').join(this.packCondition(sqlStr, this.model[name]) + '')
-            }
-          } else if (value && (value + '').length > 0) {
-            // 查看条件中包含几个{}插入符
-            let len = this.conditions[name].match(/{}/g).length
-            if (len == 1) {
-              condition += ' and ' + this.conditions[name].split('{}').join(this.packCondition(this.conditions[name], this.model[name]) + '')
-            } else if (len > 1) {
-              let conditionsStr = this.conditions[name]
-              for (let i = 0; i < len; i++) {
-                conditionsStr = conditionsStr.replace('{}', this.packCondition(this.conditions[name], this.model[name][i]))
-              }
-              condition += ' and ' + conditionsStr
-            }
-          }
-        }
-        // 通知外部查询条件变化了
-        return condition
-      },
-      // val: 调取函数时，需要的参数。exp：掉去函数的字符串
-      getSql (val, exp) {
-        return eval('this.' + exp)
-      },
-      packCondition (str, param) {
-        // console.log('查询条件: ', str, param)
-        if (param instanceof Array) {
-          return param.length > 1 ? this.recombine(param) : (str.indexOf(' in ') > 0 ? this.recombine(param) : param)
-        } else {
-          return param
-        }
-      },
-      recombine (param) {
-        // 条件拼接数据，多用于in （）。将数组转成字符串时加上单引号处理
-        let str = ''
-        if (param && param.length > 0) {
-          param.forEach((p) => {
-            str += `'${p}',`
-          })
-        }
-        return `(${str.substring(0, str.length - 1)})`
-      },
-      checkValue (val) {
-        // 只有字符串才校验
-        if (!val || typeof (val) !== 'string') {
-          return false
-        }
-        for (let i = 0; i < this.character.length; i++) {
-          if (val.toLowerCase().indexOf(this.character[i]) !== -1) {
-            return true
-          }
-        }
-        return false
-      },
-      showDrawer() {
-        this.criteriaShow = true
-      },
-      closeDrawer() {
-        this.criteriaShow = false
-      },
-      // 清空查询条件
-      clear () {
-        this.model = {}
-      }
-    }
-  }
-</script>