vue2-client 1.8.4 → 1.8.5

package/src/base-client/components/common/XStepView/XStepView.vue

@@ -0,0 +1,492 @@
+<template>
+  <div>
+    <a-row type="flex">
+      <a-col :span="stepStyle.flex">
+        <a-steps
+          :type="stepStyle.type"
+          :current="current"
+          :direction="stepStyle.direction"
+          :labelPlacement="stepStyle.labelPlacement"
+          :progressDot="stepStyle.false"
+          :size="stepStyle.size"
+          :initial="initial"
+          :status="status"
+          @change="onChange"
+        >
+          <a-step
+            v-for="(item, index) in this.configContent.step.steps"
+            :key="'step-'+item.name"
+            :title="item.title"
+            :description="item.description"
+            :sub-title="item.subTitle"
+            :disabled="item.disabled">
+            <a-icon v-if="current === index" slot="icon" :type="iconType" />
+          </a-step>
+        </a-steps>
+      </a-col>
+      <a-col :span="panelStyle.flex">
+        <template v-for="(item, index) in this.configContent.step.steps">
+          <a-card
+            v-if="current === index"
+            :bordered="false"
+            :key="'stepCard-'+item.name">
+            <template v-if="item.content.card.type === 'text'">
+              <p>{{ item.content.card.value }}</p>
+            </template>
+            <x-add-native-form v-else-if="item.content.card.type === 'form'" :ref="'XAddNativeForm'+ item.name" @onSubmit="submit"/>
+            <x-table v-else-if="item.content.card.type === 'table'" :fixed-query-form="item.content.card.queryFrom" @action="action" :query-params-name="item.content.card.queryParamsName" :ref="'XAddNativeForm'+item.name" />
+            <a-button v-if="status === 'error'" @click="success" style="color: v-bind()">下一步</a-button>
+          </a-card>
+        </template>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import XAddNativeForm from '@/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
+import { post } from '@/services/api'
+import XTable from '@/base-client/components/common/XTable/XTable.vue'
+
+export default {
+  name: 'XStepView',
+  components: { XTable, XAddNativeForm },
+  computed: {
+    stepStyle () {
+      const style = this.configContent.step.style
+      if (style) {
+        return style
+      } else {
+        return {
+          flex: 5,
+          type: 'default',
+          progressDot: 'false',
+          direction: 'horizontal',
+          labelPlacement: 'horizontal',
+          size: 'default',
+        }
+      }
+    },
+    panelStyle () {
+      const style = this.configContent.panelStyle
+      if (style) {
+        return style
+      } else {
+        return {
+          flex: 19
+        }
+      }
+    }
+
+  },
+  props: {
+    params: {
+      type: Object,
+      default: () => {
+        return { meternumber: '4923217' }
+      }
+    },
+    // panelStyle: {
+    //   type: Object,
+    //   default: () => {
+    //     return {
+    //       flex: 19
+    //     }
+    //   }
+    // },
+    // stepStyle: {
+    //   type: Object,
+    //   default: () => {
+    //     return {
+    //       flex: 5,
+    //       type: 'default',
+    //       progressDot: 'false',
+    //       direction: 'horizontal',
+    //       labelPlacement: 'horizontal',
+    //       size: 'default',
+    //     }
+    //   }
+    // }
+  },
+  data () {
+    return {
+      current: -1,
+      initial: 0,
+      status: 'wait',
+      iconType: 'loading',
+      configContent: {
+        step: {
+          style: {
+            flex: 5,
+            type: 'default',
+            progressDot: 'false',
+            direction: 'vertical',
+            labelPlacement: 'horizontal',
+            size: 'default',
+          },
+          steps: [
+            {
+              name: '开始检测',
+              title: '开始检测',
+              subTitle: '对设备状态进行确认',
+              description: '第一步',
+              disabled: false,
+              content: {
+                card: {
+                  type: 'text',
+                  value: '正在对档案状态进行查看'
+                }
+              },
+              run: {
+                name: 'deviceCheckMeterInfo',
+                params: {
+                  data: {
+                    meternumber: this.params.meternumber
+                  }
+                }
+              }
+            },
+            {
+              name: '设备重置',
+              title: '设备重置',
+              subTitle: '对设备进行重置',
+              description: '第二步',
+              disabled: false,
+              content: {
+                card: {
+                  type: 'form',
+                  value: [
+                    {
+                      addOrEdit: 'all',
+                      name: '表号',
+                      rule: {
+                        type: 'number',
+                        required: 'true'
+                      },
+                      isOnlyAddOrEdit: false,
+                      model: 't_meternumber',
+                      type: 'input'
+                    },
+                    {
+                      addOrEdit: 'all',
+                      name: '识别码',
+                      rule: {
+                        type: 'number',
+                        required: 'true'
+                      },
+                      isOnlyAddOrEdit: false,
+                      model: 't_imei',
+                      type: 'input'
+                    }
+                  ]
+                }
+              },
+              run: {
+                name: 'deviceChangeMeterInfo',
+              }
+            },
+            {
+              name: '开户记录检查',
+              title: '开户记录检查',
+              subTitle: '对开户记录进行检查',
+              description: '第三步',
+              disabled: false,
+              content: {
+                card: {
+                  type: 'text',
+                  value: '正在等待系统生成开户指令'
+                }
+              },
+              before: {
+                name: 'logic@deviceCheckOpenAccount',
+                params: {
+                  data: {
+                    meternumber: this.params.meternumber
+                  }
+                }
+              }
+            },
+            {
+              name: '充值补气记录检查',
+              title: '充值补气记录检查',
+              subTitle: '对开户充值补气记录进行检查',
+              description: '第四步',
+              disabled: false,
+              content: {
+                card: {
+                  type: 'table',
+                  queryParamsName: 'crud_metercheck_instruct',
+                  queryFrom: {
+                    t_f_meternumber: this.params.meternumber
+                  },
+                  value: [
+                    {
+                      slots: {
+                        customRender: 't_id'
+                      },
+                      sorter: true,
+                      scopedSlots: {
+                        customRender: 't_id'
+                      },
+                      slotType: 'ellipsis',
+                      dataIndex: 't_id',
+                      width: 164,
+                      title: '指令id',
+                      slotValue: 16
+                    },
+                    {
+                      slots: {
+                        customRender: 't_f_meternumber'
+                      },
+                      sorter: true,
+                      scopedSlots: {
+                        customRender: 't_f_meternumber'
+                      },
+                      slotType: 'ellipsis',
+                      dataIndex: 't_f_meternumber',
+                      width: 164,
+                      title: '表号',
+                      slotValue: 16
+                    },
+                    {
+                      slots: {
+                        customRender: 't_f_alias'
+                      },
+                      sorter: true,
+                      scopedSlots: {
+                        customRender: 't_f_alias'
+                      },
+                      slotType: 'ellipsis',
+                      dataIndex: 't_f_alias',
+                      width: 164,
+                      title: '表具别名',
+                      slotValue: 16
+                    },
+                    {
+                      slots: {
+                        customRender: 't_f_instruct_type'
+                      },
+                      sorter: true,
+                      scopedSlots: {
+                        customRender: 't_f_instruct_type'
+                      },
+                      slotType: 'ellipsis',
+                      dataIndex: 't_f_instruct_type',
+                      width: 164,
+                      title: '指令类型',
+                      slotValue: 16
+                    },
+                    {
+                      slots: {
+                        customRender: 't_f_instruct_state'
+                      },
+                      sorter: true,
+                      scopedSlots: {
+                        customRender: 't_f_instruct_state'
+                      },
+                      slotType: 'ellipsis',
+                      dataIndex: 't_f_instruct_state',
+                      width: 164,
+                      title: '通信状态',
+                      slotValue: 16
+                    },
+                    {
+                      slots: {
+                        customRender: 't_f_receive_state'
+                      },
+                      sorter: true,
+                      scopedSlots: {
+                        customRender: 't_f_receive_state'
+                      },
+                      slotType: 'ellipsis',
+                      dataIndex: 't_f_receive_state',
+                      width: 164,
+                      title: '通信结果',
+                      slotValue: 16
+                    },
+                      {
+                        slots: {
+                          customRender: 'action'
+                        },
+                        sorter: false,
+                        scopedSlots: {
+                          customRender: 'action'
+                        },
+                        slotType: 'action',
+                        dataIndex: 'action',
+                        title: '操作',
+                        slotValue: '重新通信'
+                      }
+                ]
+                }
+              },
+              run: {
+                name: 'xxx'
+              }
+            }
+          ]
+        },
+        panel: {
+          style: {
+            flex: 19
+          }
+        }
+      },
+    }
+  },
+  watch: {
+    async current (newValue) {
+      this.changeIcon()
+      const setpes = this.configContent.step.steps[newValue]
+      const type = setpes.content.card.type
+      const formValue = setpes.content.card.value
+      let timeOut = null
+      if (setpes.before) {
+        const postName = setpes.before.name.split('@')
+        let times = 0
+        timeOut = window.setInterval(() => {
+          times++
+          post('/api/af-system/' + postName[0] + '/' + postName[1], setpes.before.params).then(res => {
+            console.warn(setpes.before.name + '执行结果', res)
+            if (res.code === 200) {
+              if (res.instructs.length > 0) {
+                window.clearTimeout(timeOut)
+                this.success()
+              }
+            } else {
+              setpes.content.card.value = res.msg
+            }
+          }).catch(e => {
+            console.warn(setpes.before.name + '执行结果', e)
+            window.clearTimeout(timeOut)
+
+            this.error()
+          })
+          if (times > 12) {
+            window.clearTimeout(timeOut)
+            setpes.content.card.value = '未查询到开户信息，请确认'
+            this.error()
+          }
+        }, 10 * 1000)
+      }
+      if (type === 'form') {
+        console.warn('formValue = ', formValue)
+        this.$nextTick(() => {
+          const stepsss = this.$refs['XAddNativeForm' + setpes.name][0]
+          console.warn('stepsss', stepsss)
+          stepsss.init({
+            formItems: formValue
+          })
+        })
+      } else if (type === 'table') {
+        console.warn('formValue = ', formValue)
+        this.$nextTick(() => {
+          const stepsss = this.$refs['XAddNativeForm' + setpes.name][0]
+          console.warn('stepsss', stepsss)
+          stepsss.init({
+            tableColumns: formValue,
+            buttonState: {
+              add: false,
+              edit: true,
+              delete: false,
+              import: false,
+              export: false
+            }
+          })
+        })
+      } else {
+        if (setpes.run) {
+          post('/api/af-system/logic/' + setpes.run.name, setpes.run.params).then(t => {
+            console.warn(setpes.run.name + '执行结果', t)
+            if (t.code === 200) {
+              this.success()
+            } else {
+              setpes.content.card.value = t.msg
+            }
+          }).catch(e => {
+            console.warn(setpes.run.name + '执行结果', e)
+            this.error()
+          })
+        }
+      }
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    init (parms) {
+      const {
+        style,
+        panel,
+        steps
+      } = parms
+      if (style) {
+        this.stepStyle = style
+      }
+      if (panel) {
+        this.panelStyle = panel
+      }
+      if (steps) {
+        this.configContent.step.steps = steps
+      }
+      this.current++
+    },
+    steps () {
+      return this.steps
+    },
+    onChange (current) {
+      this.current = current
+    },
+    submit (res) {
+      console.warn('res', res)
+      const setpes = this.configContent.step.steps[this.current]
+      if (setpes.run) {
+        post('/api/af-system/logic/' + setpes.run.name, res.realForm).then(t => {
+          console.warn(setpes.run.name + '执行结果', t)
+          if (t.code === 200) {
+              this.success()
+          }
+        }).catch(e => {
+          console.warn(setpes.run.name + '执行结果', e)
+          this.error()
+        })
+      }
+    },
+    error () {
+      this.status = 'error'
+      this.iconType = 'close-circle'
+    },
+    success () {
+      this.changeIcon()
+      this.current++
+    },
+    changeIcon () {
+      this.status = 'wait'
+      this.iconType = 'loading'
+    },
+    previous () {
+      this.current--
+    },
+    action (record, id, actionType) {
+      console.warn('record', record)
+      console.warn('id', id)
+      console.warn('actionType', actionType)
+      const setpes = this.configContent.step.steps[this.current]
+      if (setpes.run) {
+        post('/api/af-system/logic/' + setpes.run.name, { data: record }).then(t => {
+          console.warn(setpes.run.name + '执行结果', t)
+          if (t.code === 200) {
+            this.success()
+          }
+        }).catch(e => {
+          console.warn(setpes.run.name + '执行结果', e)
+          this.error()
+        })
+      }
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped></style>

package/src/base-client/components/common/XStepView/index.js

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

package/src/base-client/components/common/XStepView/index.md

@@ -0,0 +1,31 @@
+# XStepView 通用步骤视图
+
+通用步骤视图，根据JSON配置生成一个完整的通用步骤视图
+
+
+
+## 何时使用
+
+当需要一个可以JSON配置生成一个完整的通用步骤视图时
+
+
+引用方式：
+
+```javascript
+import XStepView from '@vue2-client/base-client/components/XStepView'
+
+export default {
+    components: {
+      XStepView
+    }
+}
+```
+
+
+
+## 代码演示
+```html
+<x-step-view
+  :params = 'json'
+/>
+```

package/src/base-client/components/index.js

@@ -1,41 +1,45 @@
-import XForm from './common/XForm'
-import XAddForm from './common/XAddForm'
-import XAddNativeForm from './common/XAddNativeForm'
-import XFormCol from './common/XFormCol'
-import XTable from './common/XTable'
-import XTreeOne from './common/XTreeOne'
-import XImportExcel from './common/XImportExcel'
-import XDataDrawer from './common/XDataDrawer'
-import XCard from './common/XCard'
-import XBadge from './common/XBadge'
-import Upload from './common/Upload'
-import JSONToTree from './common/JSONToTree'
-import FormGroupEdit from './common/FormGroupEdit'
-import FormGroupQuery from './common/FormGroupQuery'
-import AddressSearchCombobox from './common/AddressSearchCombobox'
-import AmapMarker from './common/AmapMarker'
-import CreateQuery from './common/CreateQuery'
-import CreateSimpleFormQuery from './common/CreateSimpleFormQuery'
-import PersonSetting from './common/PersonSetting'
-
-export default {
-  XForm,
-  XAddForm,
-  XAddNativeForm,
-  XFormCol,
-  XTable,
-  XTreeOne,
-  XImportExcel,
-  XDataDrawer,
-  XCard,
-  XBadge,
-  Upload,
-  JSONToTree,
-  FormGroupEdit,
-  FormGroupQuery,
-  AddressSearchCombobox,
-  AmapMarker,
-  CreateQuery,
-  CreateSimpleFormQuery,
-  PersonSetting
-}
+import XForm from './common/XForm'
+import XAddForm from './common/XAddForm'
+import XAddNativeForm from './common/XAddNativeForm'
+import XFormCol from './common/XFormCol'
+import XTable from './common/XTable'
+import XTreeOne from './common/XTreeOne'
+import XImportExcel from './common/XImportExcel'
+import XDataDrawer from './common/XDataDrawer'
+import XCard from './common/XCard'
+import XBadge from './common/XBadge'
+import Upload from './common/Upload'
+import JSONToTree from './common/JSONToTree'
+import FormGroupEdit from './common/FormGroupEdit'
+import FormGroupQuery from './common/FormGroupQuery'
+import AddressSearchCombobox from './common/AddressSearchCombobox'
+import AmapMarker from './common/AmapMarker'
+import CreateQuery from './common/CreateQuery'
+import CreateSimpleFormQuery from './common/CreateSimpleFormQuery'
+import PersonSetting from './common/PersonSetting'
+import XFormTable from './common/XFormTable'
+import Tree from './common/Tree'
+
+export default {
+  XForm,
+  XAddForm,
+  XAddNativeForm,
+  XFormCol,
+  XTable,
+  XTreeOne,
+  XImportExcel,
+  XDataDrawer,
+  XCard,
+  XBadge,
+  Upload,
+  JSONToTree,
+  FormGroupEdit,
+  FormGroupQuery,
+  AddressSearchCombobox,
+  AmapMarker,
+  CreateQuery,
+  CreateSimpleFormQuery,
+  XFormTable,
+  PersonSetting,
+  Tree
+}

package/src/bootstrap.js

@@ -3,7 +3,7 @@ import { loadRoutes, loadGuards, setAppOptions } from '@vue2-client/utils/router
 import { loadInterceptors } from '@vue2-client/utils/request'
 import guards from '@vue2-client/router/guards'
 import interceptors from '@vue2-client/utils/axios-interceptors'
-import { getConfig } from '@vue2-client/services/api'
+import { getConfigByName } from '@vue2-client/services/api/common'
 
 /**
  * 启动引导方法
@@ -16,7 +16,7 @@ import { getConfig } from '@vue2-client/services/api'
 async function bootstrap ({ router, store, i18n, message }) {
   Vue.$store = store
   // 获取系统配置
-  await getConfig('webConfig', undefined, res => {
+  await getConfigByName('webConfig', undefined, res => {
     localStorage.setItem(process.env.VUE_APP_WEB_CONFIG_KEY, JSON.stringify(res))
     if (res.setting) {
       Vue.$store.commit('setting/setSetting', res.setting)

package/src/config/default/setting.config.js

@@ -42,8 +42,8 @@ module.exports = {
   },
   // 旧系统路径
   iframeSrc: '/singlepage/index.html',
-  // 兼容旧版本 V3(最新V3产品)  OA(公司OA)
-  compatible: 'V3',
+  // 兼容旧版本 V4（最新产品）  V3(V3产品)  OA(公司OA)
+  // compatible: 'V4',
   // 路由资源名称
   routeName: '智慧燃气',
   // 自定义组件集合 格式为组件名: 组件路径（不需要带@/）