vue2-client 0.1.0 → 1.1.0

package/src/components/InstructDetailsView/InstructDetailsView.vue

@@ -1,518 +0,0 @@
-<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
-  <a-drawer
-    title="指令详情"
-    placement="right"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    :visible="visible"
-    @close="onClose"
-  >
-    <page-header-wrapper
-      :title="'指令：' + details.f_instruct_type"
-      :breadcrumb="false"
-    >
-      <template v-slot:content>
-        <a-descriptions size="small" :column="isMobile ? 1 : 2">
-          <a-descriptions-item label="指令编号" :span="isMobile ? 1 : 2">{{ details.id }}</a-descriptions-item>
-          <a-descriptions-item label="表号">{{ details.f_meternumber }}</a-descriptions-item>
-          <a-descriptions-item label="操作人员">{{ details.f_inputtor }}</a-descriptions-item>
-          <a-descriptions-item label="指令说明">{{ details.f_instruct_title }}</a-descriptions-item>
-          <a-descriptions-item label="生成时间">{{ format(details.f_instruct_date,'yyyy-MM-dd hh:mm:ss') }}</a-descriptions-item>
-          <a-descriptions-item label="表厂别名">{{ details.f_alias }}</a-descriptions-item>
-          <a-descriptions-item label="最后发送时间">{{ format(details.f_send_date,'yyyy-MM-dd hh:mm:ss') }}</a-descriptions-item>
-          <a-descriptions-item label="最后响应时间">{{ format(details.f_callback_date,'yyyy-MM-dd hh:mm:ss') }}</a-descriptions-item>
-        </a-descriptions>
-      </template>
-
-      <!-- actions -->
-      <template v-slot:extra>
-        <a-button-group style="margin-right: 4px;">
-          <a-button type="dashed" @click="getInstruct(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>将指令标记为待发送状态</p>
-              <p>指令将在 定时器轮询/表具上报 后重新发送</p>
-              <p style="color: red">此操作不可撤销</p>
-            </template>
-            <a-button type="primary" @click="againSend(details.id)" :disabled="againSendBtnHide()">重新发送</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 style="color: red">此操作不可撤销</p>
-            </template>
-            <a-button type="danger" @click="cancelSend(details.id)" :disabled="cancelSendBtnHide()">取消发送</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_instruct_state | instructStatusTypeFilter"/>
-              {{ details.f_instruct_state }}
-            </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">{{ details.f_receive_state }}</div>
-          </a-col>
-        </a-row>
-      </template>
-
-      <a-card :bordered="false" title="指令状态">
-        <a-steps :direction="'horizontal'" :current="step" :status="status">
-          <a-step>
-            <template v-slot:title>
-              <span>待发送</span>
-            </template>
-            <template v-slot:description>
-              <div class="antd-pro-pages-profile-advanced-style-stepDescription">
-                指令已经就绪，待发送
-                <div class="antd-pro-pages-profile-advanced-style-stepDescription" >
-                  {{ format(details.f_instruct_date,'yyyy-MM-dd hh:mm:ss') }}
-                </div>
-              </div>
-            </template>
-          </a-step>
-          <a-step>
-            <template v-slot:title>
-              <span>已发送</span>
-            </template>
-            <template v-slot:description>
-              <div class="antd-pro-pages-profile-advanced-style-stepDescription">
-                {{ getIntroduction() }}
-                <div class="antd-pro-pages-profile-advanced-style-stepDescription">
-                  {{ format(details.f_send_date,'yyyy-MM-dd hh:mm:ss') }}
-                </div>
-              </div>
-            </template>
-          </a-step>
-          <a-step>
-            <template v-slot:title>
-              <span>{{ instructResult }}</span>
-            </template>
-            <template v-slot:description>
-              <div class="antd-pro-pages-profile-advanced-style-stepDescription">
-                {{ getResultText(instructResult) }}
-                <div class="antd-pro-pages-profile-advanced-style-stepDescription">
-                  {{ format(details.f_callback_date,'yyyy-MM-dd hh:mm:ss') }}
-                </div>
-              </div>
-            </template>
-          </a-step>
-        </a-steps>
-      </a-card>
-
-      <!-- 操作 -->
-      <a-card
-        style="margin-top: 24px"
-        :bordered="false"
-        :tabList="operationTabList"
-        :activeTabKey="operationActiveTabKey"
-        @tabChange="(key) => {this.operationActiveTabKey = key}"
-      >
-        <div v-if="operationActiveTabKey === '1'">
-          <a-card type="inner" title="指令内容">
-            <json-viewer :value="details.f_instruct_content === undefined ? {} : toJSON(details.f_instruct_content)"></json-viewer>
-          </a-card>
-          <a-card type="inner" title="指令元数据">
-            <json-viewer :value="details.f_instruct_meta_data === undefined ? {} : toJSON(details.f_instruct_meta_data)"></json-viewer>
-          </a-card>
-        </div>
-
-        <s-table
-          ref="table"
-          size="default"
-          rowKey="id"
-          v-else-if="operationActiveTabKey === '2'"
-          :columns="recordColumns"
-          :data="loadRecordData"
-          showPagination="auto"
-        >
-          <span slot="f_input_date" slot-scope="text">
-            {{ format(text,'yyyy-MM-dd hh:mm:ss') }}
-          </span>
-          <span slot="status" slot-scope="text">
-            <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
-          </span>
-        </s-table>
-        <div v-else-if="operationActiveTabKey === '3'" class="no-data"><a-icon type="frown-o"/>暂无数据</div>
-      </a-card>
-    </page-header-wrapper>
-  </a-drawer>
-</template>
-
-<script>
-import Vue from 'vue'
-import { businessApi } from '@/vue2-client/api/business'
-import { STable } from '@/components'
-import { baseMixin } from '@/store/app-mixin'
-import JsonViewer from 'vue-json-viewer'
-import { formatDate } from '@/utils/util'
-
-const instructStatusMap = {
-  '待发送': {
-    status: 'default',
-    text: '待发送'
-  },
-  '已发送': {
-    status: 'processing',
-    text: '已发送'
-  },
-  '执行成功': {
-    status: 'success',
-    text: '执行成功'
-  },
-  '发送成功': {
-    status: 'success',
-    text: '发送成功'
-  },
-  '执行失败': {
-    status: 'error',
-    text: '执行失败'
-  },
-  '忽略冗余': {
-    status: 'default',
-    text: '忽略冗余'
-  },
-  '已延迟': {
-    status: 'default',
-    text: '已延迟'
-  },
-  '无响应': {
-    status: 'default',
-    text: '无响应'
-  },
-  '响应超时': {
-    status: 'default',
-    text: '响应超时'
-  }
-}
-
-export default {
-  name: 'InstructDetailsView',
-  components: {
-    STable,
-    JsonViewer
-  },
-  mixins: [baseMixin],
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // 指令详情
-      details: {
-        id: 0,
-        userid: 0,
-        f_meternumber: '',
-        f_instruct_type: '',
-        f_instruct_title: '',
-        f_instruct_state: '待发送',
-        f_receive_state: '',
-        f_inputtor: '',
-        f_alias: '',
-        f_instruct_date: '',
-        f_send_date: '',
-        f_callback_date: '',
-        f_instruct_meta_data: {},
-        f_instruct_content: {}
-      },
-      // 当前步骤
-      step: 0,
-      // 当前状态,
-      status: 'process',
-      // 指令状态结果
-      instructResult: '执行成功',
-      // 默认表格数据
-      defaultData: {
-        data: [],
-        pageSize: 0,
-        pageNo: 0,
-        totalPage: 0,
-        totalCount: 0
-      },
-      // 是否刷新加载中
-      loading: false,
-
-      operationTabList: [
-        {
-          key: '1',
-          tab: '开发者信息'
-        },
-        {
-          key: '2',
-          tab: '操作日志'
-        },
-        {
-          key: '3',
-          tab: '维护教程'
-        }
-      ],
-      operationActiveTabKey: '1',
-      recordColumns: [
-        {
-          title: 'ID',
-          dataIndex: 'id',
-          key: 'id'
-        },
-        {
-          title: '操作类型',
-          dataIndex: 'f_type',
-          key: 'f_type'
-        },
-        {
-          title: '操作说明',
-          dataIndex: 'f_info',
-          key: 'f_info'
-        },
-        {
-          title: '操作人',
-          dataIndex: 'f_china_name',
-          key: 'f_china_name'
-        },
-        {
-          title: '联系方式',
-          dataIndex: 'f_telephone',
-          key: 'f_telephone'
-        },
-        {
-          title: '执行结果',
-          dataIndex: 'f_state',
-          key: 'f_state',
-          scopedSlots: { customRender: 'status' }
-        },
-        {
-          title: '操作时间',
-          dataIndex: 'f_input_date',
-          key: 'f_input_date',
-          scopedSlots: { customRender: 'f_input_date' }
-        }
-      ],
-      // 加载数据方法 必须为 Promise 对象
-      loadRecordData: parameter => {
-        const requestParameters = Object.assign({}, parameter, {
-          dataId: this.instructid
-        })
-        return this.getRecord(requestParameters)
-      }
-    }
-  },
-  mounted () {
-    this.getInstruct(this.instructid)
-    this.user = this.userInfo
-  },
-  filters: {
-    instructStatusTypeFilter (type) {
-      return instructStatusMap[type].status
-    },
-    statusFilter (status) {
-      const statusMap = {
-        '0': '成功',
-        '1': '失败'
-      }
-      return statusMap[status]
-    },
-    statusTypeFilter (type) {
-      const statusTypeMap = {
-        '0': 'success',
-        '1': 'error'
-      }
-      return statusTypeMap[type]
-    }
-  },
-  computed: {
-    userInfo () {
-      return this.$store.getters.userInfo
-    }
-  },
-  props: {
-    instructid: {
-      type: String,
-      required: true
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    onClose () {
-      this.$emit('update:visible', false)
-    },
-    getRecord (requestParameters) {
-      return this.defaultData
-    },
-    getInstruct (instructId) {
-      this.loading = true
-      return Vue.resetpost(businessApi.getInstructDetails, { id: instructId }).then(res => {
-          this.details = res
-          // 判断当前指令状态是不是最终流程
-          if (this.details.f_instruct_state === '待发送') {
-            this.status = 'process'
-            this.step = 0
-            this.instructResult = '执行成功'
-          } else if (this.details.f_instruct_state === '已发送') {
-            this.status = 'process'
-            this.step = 1
-            this.instructResult = '执行成功'
-          } else {
-            this.step = 2
-            this.instructResult = this.details.f_instruct_state
-            if (this.details.f_instruct_state === '发送失败' || this.details.f_instruct_state === '执行失败' ||
-              this.details.f_instruct_state === '响应超时') {
-              this.status = 'error'
-            } else if (this.details.f_instruct_state === '忽略冗余' || this.details.f_instruct_state === '无响应' || this.details.f_instruct_state === '已延迟') {
-              this.status = 'wait'
-            } else {
-              this.status = 'finish'
-            }
-          }
-          this.loading = false
-        }, err => {
-          this.loading = false
-          console.warn(err)
-        })
-    },
-    format (date, format) {
-      return formatDate(date, format)
-    },
-    againSend (id) {
-      const _this = this
-      this.$confirm({
-        title: '您确定要重新发送该指令吗？',
-        content: '指令状态将被标记为待发送',
-        okText: '确定',
-        okType: 'danger',
-        cancelText: '取消',
-        onOk () {
-          return Vue.resetpost(businessApi.againSendInstruct, {
-            id: id,
-            username: _this.user.username
-          }).then(res => {
-            _this.getInstruct(id)
-            if (res.nums === 1) {
-              _this.$message.success('操作成功')
-            } else {
-              _this.$message.error('操作失败')
-            }
-          })
-        }
-      })
-    },
-    cancelSend (id) {
-      const _this = this
-      this.$confirm({
-        title: '您确定要取消发送该指令吗？',
-        content: '指令状态将被标记为忽略冗余',
-        okText: '确定',
-        okType: 'danger',
-        cancelText: '取消',
-        onOk () {
-          return Vue.resetpost(businessApi.cancelSendInstruct, {
-            id: id,
-            username: _this.user.username
-          }).then(res => {
-            _this.getInstruct(id)
-            if (res.nums === 1) {
-              _this.$message.success('操作成功')
-            } else {
-              _this.$message.error('操作失败')
-            }
-          })
-        }
-      })
-    },
-    againSendBtnHide () {
-      return this.step === 0 || this.loading
-    },
-    cancelSendBtnHide () {
-      return (this.step !== 0 && this.step !== 1 && this.details.f_instruct_state !== '已延迟') || this.loading
-    },
-    toJSON (value) {
-      try {
-        return JSON.parse(value)
-      } catch (e) {
-        return value
-      }
-    },
-    getResultText (value) {
-      if (this.step === 2) {
-        if (value === '执行成功') {
-          return '指令已发送成功'
-        } else if (value === '执行失败') {
-          return '失败，请查看响应结果'
-        } else if (value === '忽略冗余') {
-          return '指令已被取消发送'
-        } else if (value === '无响应') {
-          return '无法得到指令响应结果'
-        } else if (value === '响应超时') {
-          return '未得到指令响应结果'
-        } else if (value === '已延迟') {
-          return '由于表具限制，指令已被延迟发送'
-        }
-      }
-    },
-    getIntroduction () {
-      if (this.step > 0) {
-        return '已发送，等待响应结果'
-      } else if (this.step === 0) {
-        return ''
-      }
-    }
-  },
-  watch: {
-    'instructid' (val) {
-      this.getInstruct(this.instructid)
-      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/InstructDetailsView/index.md

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