vue2-client 1.7.0 → 1.7.2

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

@@ -25,31 +25,121 @@ export default {
 ## 代码演示
 
 ```html
-<x-add-form
-  :business-type="businessType"
-  :json-data="formItems"
-  :modify-model-data="modifyModelData"
-  :loading="loading"
-  @onSubmit="onSubmit">
-</x-add-form>
+<x-add-native-form
+  ref="nativeForm"
+  @onSubmit="submit"/>
 ```
 
-## API
+## 构造参数，通过init方法构造
 
-| 参数              | 说明                       | 类型      | 默认值   |
-|-----------------|--------------------------|---------|-------|
-| businessType    | 业务类型                     | String  | ''    |
-| jsonData        | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}    |
-| modifyModelData | 修改操作前查询出的业务数据            | Object  | {}    |
-| loading         | 新增或修改业务是否执行中             | Boolean | false |
-| fixedAddForm    | 固定新增表单，会和新增表单合并          | Object  | {}    |
-| @onSubmit       | 表单的提交事件                  | event   | -     |
+| 参数              | 说明                   | 类型    | 默认值    |
+|-----------------|----------------------|-------|--------|
+| formItems       | 表单项集合                | array | []     |
+| viewMode        | 是否为预览模式              | bool  | false  |
+| isHandleFormKey | 是否对提交表单的key进行处理      | bool  | true   |
+| serviceName     | 所属服务模块名              | string | system |
+| businessType    | 业务类型（新增/修改）          | string | -      |
+| title           | 业务标题                 | string | -      |
+| getDataParams   | 调用logic获取下拉框数据源的追加参数 | {}    | -      |
+| simpleFormJsonData   | 动态简易表单集合 | {}    | -      |
+
+## 事件
+| 事件        | 说明                   | 类型    | 默认值       |
+|-----------|----------------------|-------|-----------|
+| @onSubmit | 表单的提交事件              | event | -         |
 
 ## 例子1
 ----
-参考XFormTable组件
+```vue
+<template>
+  <x-add-native-form
+    ref="nativeForm"
+    @onSubmit="submit"/>
+</template>
+<script>
+  import { getConfigUrl } from '@vue2-client/services/api/common'
+  export default {
+    created () {
+      this.initComponents()
+    },
+    methods: {
+      initComponents() {
+        // 获取请求配置中心的地址
+        const url = getConfigUrl('yourConfigModuleName')
+        post(url, { configName: 'yourConfigName' }).then(res => {
+          if (this.$refs.nativeForm) {
+            this.$refs.nativeForm.init({
+              formItems: res,
+              serviceName: 'system',
+              businessType: '新增',
+              title: '新增告警记录'
+            })
+          }
+        })
+      },
+      submit (res) {
+        post(api.addData, res.realForm).then(data => {
+          this.$message.success(res.businessType + '成功！')
+        }).catch(e => {
+          this.$message.error(res.businessType + '失败：' + e)
+        })
+      }
+    }
+  }
+</script>
+```
+
+## JSON配置示例
+----
+`这是一个表单配置示例，通过以下配置，你会得到一个有选项的单选框，一个带校验的输入框，以及一个文本域`
+```json
+[
+  {
+    "name": "是否通气",
+    "model": "is_ventilate",
+    "keys": [
+      { "label": "是", "value": "1" },
+      { "label": "否", "value": "0" }
+    ],
+    "type": "radio",
+    "addOrEdit": "all",
+  },
+  {
+    "name": "处理人",
+    "model": "f_processor",
+    "rule": {
+       "required": true
+    },
+    "type": "input",
+    "addOrEdit": "all",
+  },
+  {
+    "name": "处理内容",
+    "model": "f_handle_content",
+    "type": "textarea",
+    "addOrEdit": "all",
+  }
+]
 ```
 
+## JSON配置规范
+----
+| 参数              | 说明                   | 类型    | 默认值       |
+|-----------------|----------------------|-------|-----------|
+| name       | 表单项名称                | string | ''        |
+| model        | 表单项key              | string  | ''     |
+| rule | 表单校验      | json  | {}      |
+|   -> required | 是否必填      | bool  | false      |
+| type     | 表单类型              | string | input |
+| keys     | 当表单类型是select,radio时的选项值     | Array | [] |
+|   -> label  | 选项的字面值     | string | '' |
+|   -> value  | 选项的实际值     | string | '' |
+| addOrEdit    | 新增/修改场景          | string | all         |
+|   -> add    | 仅新增          | string | -         |
+|   -> edit    | 仅修改          | string | -         |
+|   -> all    | 全部支持          | string | -         |
+
+
 注意事项
 ----
 

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

@@ -1,64 +1,64 @@
-<template>
-  <div>
-    <a-card :body-style="{ margin: 0, padding: 0 }" :bordered="false">
-      <a-skeleton v-show="loadState === 'loading'" active style="padding: 16px"/>
-      <a-empty v-show="loadState === 'empty'">
-        <a-button type="dashed" @click="retry">
-          重新加载
-        </a-button>
-      </a-empty>
-      <a-card
-        v-show="loadState === 'error'"
-        :body-style="{ margin: '0 auto' }"
-        :bordered="false"
-        :hoverable="true"
-        class="retryCard"
-        @click="retry" >
-        <a-icon :style="{ fontSize: '28px' }" type="global"/>
-        <p class="noSelect" style="margin-top: 20px">网络好像开小差了，点击重新加载...</p>
-      </a-card>
-      <div v-show="loadState === 'success'">
-        <slot></slot>
-      </div>
-    </a-card>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'XCard',
-  props: {
-    loadState: {
-      type: String,
-      default: 'success'
-    },
-    retry: {
-      type: Function,
-      default: () => {
-        console.error('未实现重新加载')
-      }
-    }
-  },
-  data () {
-    return {
-
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.retryCard {
-  text-align: center;
-}
-.noSelect {
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Chrome/Safari/Opera */
-  -khtml-user-select: none; /* Konqueror */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently
-  not supported by any browser */
-}
-</style>
+<template>
+  <div>
+    <a-card :body-style="{ margin: 0, padding: 0 }" :bordered="false">
+      <a-skeleton v-show="loadState === 'loading'" active style="padding: 16px"/>
+      <a-empty v-show="loadState === 'empty'">
+        <a-button type="dashed" @click="retry">
+          重新加载
+        </a-button>
+      </a-empty>
+      <a-card
+        v-show="loadState === 'error'"
+        :body-style="{ margin: '0 auto' }"
+        :bordered="false"
+        :hoverable="true"
+        class="retryCard"
+        @click="retry" >
+        <a-icon :style="{ fontSize: '28px' }" type="global"/>
+        <p class="noSelect" style="margin-top: 20px">网络好像开小差了，点击重新加载...</p>
+      </a-card>
+      <div v-show="loadState === 'success'">
+        <slot></slot>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'XCard',
+  props: {
+    loadState: {
+      type: String,
+      default: 'success'
+    },
+    retry: {
+      type: Function,
+      default: () => {
+        console.error('未实现重新加载')
+      }
+    }
+  },
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.retryCard {
+  text-align: center;
+}
+.noSelect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Chrome/Safari/Opera */
+  -khtml-user-select: none; /* Konqueror */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+  not supported by any browser */
+}
+</style>

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

@@ -0,0 +1,180 @@
+<template>
+  <a-drawer
+    :visible="visible"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    placement="right"
+    :title="title"
+    @close="onClose"
+  >
+    <a-spin :spinning="loading">
+      <a-page-header :title="getPageHeaderTitle">
+        <div class="row">
+          <div class="content">
+            <slot name="contentDescriptions" :datas="details"></slot>
+          </div>
+          <div class="extra">
+            <a-row class="status-list" v-for="(item,index) in extraStatusList" :key="'extraStatus' + index">
+              <a-col :sm="24" :xs="12">
+                <div class="text">{{ item.text }}</div>
+                <div class="heading">
+                  <x-badge :is-external-text="true" :value="item.key" :badge-key="item.keyMap ? item.keyMap : 'none'"/>
+                </div>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+        <!-- actions -->
+        <template v-slot:extra>
+          <a-button-group style="margin-right: 4px;">
+            <a-button :loading="loading" type="dashed" @click="initView('1')">刷新</a-button>
+          </a-button-group>
+          <a-button-group style="margin-right: 4px;">
+            <slot name="extraActions" :datas="details"></slot>
+          </a-button-group>
+        </template>
+        <template v-slot:footer>
+          <slot name="footerContent" :datas="details"></slot>
+        </template>
+      </a-page-header>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import XBadge from '@vue2-client/base-client/components/common/XBadge/XBadge'
+
+export default {
+  name: 'InstructDetailsView',
+  components: {
+    XBadge
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // Tab页签
+      tabActiveKey: '1',
+      // 数据详情
+      details: {},
+      // 加载状态
+      loading: true
+    }
+  },
+  mounted () {
+    this.initView('1')
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    extraStatusList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView (tabActiveKey) {
+      this.tabActiveKey = tabActiveKey || '1'
+      this.getDatas()
+    },
+    // 获取详情信息
+    getDatas () {
+      this.loading = true
+      this.$emit('load').then(res => {
+        this.details = res
+      }, err => {
+        console.error(err)
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 获取页头标题
+    getPageHeaderTitle () {
+      this.$emit('getPageHeaderTitle', this.details)
+    },
+    // 关闭抽屉时回调
+    onClose () {
+      this.$emit('update:visible', false)
+    }
+  },
+  watch: {
+    'visible' (val) {
+      if (val) {
+        this.initView('1')
+      }
+    }
+  }
+}
+</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;
+  }
+}
+
+.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/common/XDataDrawer/index.js

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

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

@@ -0,0 +1,41 @@
+# XForm
+
+通用数据抽屉控件，快速制作数据详情抽屉
+
+
+## 何时使用
+
+当需要一个通用数据抽屉时
+
+
+引用方式：
+
+```javascript
+import XDataDrawer from '@vue2-client/base-client/components/XDataDrawer/XDataDrawer'
+
+export default {
+    components: {
+      XDataDrawer
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-data-drawer
+  :isExports="true"
+  @onSubmit="onSubmit">
+</x-data-drawer>
+```
+
+## API
+
+| 参数        | 说明                       | 类型      | 默认值  |
+|-----------|--------------------------|---------|------|
+| jsonData  | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}   |
+| isExports | 是否显示导出按钮                 | Boolean | true |
+| getDataParams | 调用logic获取数据源的追加参数 | Object | - |
+| @onSubmit | 表单的提交事件                  | event   | -    |