vue2-client 1.16.71 → 1.16.72

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

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

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

@@ -1,113 +1,113 @@
-<template>
-  <a-modal
-    :confirm-loading="loading"
-    :destroyOnClose="true"
-    :title="resolvedTitle? resolvedTitle : businessTitle"
-    :visible="visible"
-    :width="`${xAddFormLayoutWidth}vw`"
-    :zIndex="1001"
-    okText="提交"
-    @cancel="close"
-    @ok="$refs.nativeForm.onSubmit()">
-    <x-add-native-form
-      ref="nativeForm"
-      @afterSubmit="afterSubmit"
-      @onSubmit="onSubmit"
-      @x-form-item-emit-func="emitFunc">
-      <template slot="groupFormItems" slot-scope="{form, model, rules, modifyModelData}">
-        <slot name="groupFormItems" :form="form" :model="model" :rules="rules" :modifyModelData="modifyModelData"></slot>
-      </template>
-    </x-add-native-form>
-  </a-modal>
-</template>
-<script>
-import { mapState } from 'vuex'
-import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
-
-export default {
-    name: 'XAddForm',
-    components: {
-      XAddNativeForm,
-    },
-    props: {
-    },
-    data () {
-      return {
-        // 业务类型
-        businessType: '',
-        // 业务标题
-        title: '',
-        // 自定义标题
-        resolvedTitle: '',
-        // 新增或修改业务是否执行中
-        loading: false,
-        // 是否显示新增/修改模态框
-        visible: false,
-        // 本地编辑模式
-        localEditMode: false,
-        // 弹出表单宽度
-        xAddFormLayoutWidth: 68
-      }
-    },
-    computed: {
-      businessTitle () {
-        return this.businessType + this.title
-      },
-      ...mapState('account', { currUser: 'user' })
-    },
-    methods: {
-      init (params) {
-        params.showSubmitBtn = false
-        const {
-          businessType, title, customTitle, xAddFormLayout, localEditMode, xAddFormLayoutWidth = 68
-        } = params
-        if (xAddFormLayout) {
-          params.layout = xAddFormLayout
-        }
-        this.businessType = businessType
-        this.xAddFormLayoutWidth = xAddFormLayoutWidth
-        this.title = title
-        this.resolvedTitle = customTitle
-        this.localEditMode = localEditMode
-        this.visible = true
-        const that = this
-        that.$nextTick(() => {
-          that.$refs.nativeForm.init(params)
-        })
-      },
-      close () {
-        this.loading = false
-        this.visible = false
-      },
-      onSubmit (params) {
-        this.loading = true
-        const modalClose = () => {
-          this.loading = false
-          this.close()
-        }
-        if (this.localEditMode) {
-          // 交由父级处理
-          this.$emit('onLocalSubmit', params, modalClose)
-        } else if (this.$listeners.onSubmit) {
-          // 交由父级处理
-          this.$emit('onSubmit', params, modalClose)
-        } else {
-          // 触发默认提交事件
-          this.$refs.nativeForm.defaultSubmit(params.realForm, modalClose)
-        }
-      },
-      afterSubmit (params) {
-        this.$emit('afterSubmit', params)
-      },
-      emitFunc (func, data, value) {
-        this.$emit('x-form-item-emit-func', func, data, value)
-      },
-      setForm (form) {
-        this.$refs.nativeForm.setForm(form)
-      },
-      setFormWithKey (form) {
-        this.$refs.nativeForm.setFormWithKey(form)
-      }
-    }
-  }
-</script>
+<template>
+  <a-modal
+    :confirm-loading="loading"
+    :destroyOnClose="true"
+    :title="resolvedTitle? resolvedTitle : businessTitle"
+    :visible="visible"
+    :width="`${xAddFormLayoutWidth}vw`"
+    :zIndex="1001"
+    okText="提交"
+    @cancel="close"
+    @ok="$refs.nativeForm.onSubmit()">
+    <x-add-native-form
+      ref="nativeForm"
+      @afterSubmit="afterSubmit"
+      @onSubmit="onSubmit"
+      @x-form-item-emit-func="emitFunc">
+      <template slot="groupFormItems" slot-scope="{form, model, rules, modifyModelData}">
+        <slot name="groupFormItems" :form="form" :model="model" :rules="rules" :modifyModelData="modifyModelData"></slot>
+      </template>
+    </x-add-native-form>
+  </a-modal>
+</template>
+<script>
+import { mapState } from 'vuex'
+import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
+
+export default {
+    name: 'XAddForm',
+    components: {
+      XAddNativeForm,
+    },
+    props: {
+    },
+    data () {
+      return {
+        // 业务类型
+        businessType: '',
+        // 业务标题
+        title: '',
+        // 自定义标题
+        resolvedTitle: '',
+        // 新增或修改业务是否执行中
+        loading: false,
+        // 是否显示新增/修改模态框
+        visible: false,
+        // 本地编辑模式
+        localEditMode: false,
+        // 弹出表单宽度
+        xAddFormLayoutWidth: 68
+      }
+    },
+    computed: {
+      businessTitle () {
+        return this.businessType + this.title
+      },
+      ...mapState('account', { currUser: 'user' })
+    },
+    methods: {
+      init (params) {
+        params.showSubmitBtn = false
+        const {
+          businessType, title, customTitle, xAddFormLayout, localEditMode, xAddFormLayoutWidth = 68
+        } = params
+        if (xAddFormLayout) {
+          params.layout = xAddFormLayout
+        }
+        this.businessType = businessType
+        this.xAddFormLayoutWidth = xAddFormLayoutWidth
+        this.title = title
+        this.resolvedTitle = customTitle
+        this.localEditMode = localEditMode
+        this.visible = true
+        const that = this
+        that.$nextTick(() => {
+          that.$refs.nativeForm.init(params)
+        })
+      },
+      close () {
+        this.loading = false
+        this.visible = false
+      },
+      onSubmit (params) {
+        this.loading = true
+        const modalClose = () => {
+          this.loading = false
+          this.close()
+        }
+        if (this.localEditMode) {
+          // 交由父级处理
+          this.$emit('onLocalSubmit', params, modalClose)
+        } else if (this.$listeners.onSubmit) {
+          // 交由父级处理
+          this.$emit('onSubmit', params, modalClose)
+        } else {
+          // 触发默认提交事件
+          this.$refs.nativeForm.defaultSubmit(params.realForm, modalClose)
+        }
+      },
+      afterSubmit (params) {
+        this.$emit('afterSubmit', params)
+      },
+      emitFunc (func, data, value) {
+        this.$emit('x-form-item-emit-func', func, data, value)
+      },
+      setForm (form) {
+        this.$refs.nativeForm.setForm(form)
+      },
+      setFormWithKey (form) {
+        this.$refs.nativeForm.setFormWithKey(form)
+      }
+    }
+  }
+</script>

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

@@ -27,7 +27,39 @@
           </a-card>
         </a-row>
       </template>
-      <a-row ref="GroupItemRow">
+      <template v-if="isSimpleInlineMode">
+        <a-row
+          v-for="(row, rowIndex) in simpleInlineRows"
+          :key="'simple-row-' + rowIndex"
+          :gutter="0"
+          type="flex">
+          <a-col
+            v-for="(item, itemIndex) in row.items"
+            :key="'simple-item-' + itemIndex"
+            :span="item.span">
+            <x-form-item
+              class="simple-inline-item"
+              :attr="item.formItem"
+              :disabled="itemDisabled(item.formItem)"
+              :read-only="readonly(item.formItem)"
+              :files="files"
+              :form="form"
+              :images="images"
+              :service-name="serviceName"
+              mode="新增/修改"
+              layout="simple-inline"
+              :rules="rules[`${item.formItem.name}${item.formItem.model}`]"
+              :get-data-params="getDataParams"
+              :env="env"
+              @x-form-item-emit-func="emitFunc"
+              @rowChoose="rowChoose"
+              :setForm="setForm"
+              :style="{ margin: 0, padding: '2px' }"
+            />
+          </a-col>
+        </a-row>
+      </template>
+      <a-row ref="GroupItemRow" v-if="!isSimpleInlineMode">
         <a-col :span="3" v-if="!inXFormGroup && !(groups[0].groupName === DEFAULT_GROUP_NAME)">
           <a-tabs tab-position="left" v-model="activeTab" @change="scrollToGroup">
             <a-tab-pane
@@ -75,7 +107,7 @@
           </a-row>
         </a-col>
       </a-row>
-      <a-row :gutter="16" v-for="(groupItem, groupIndex) in groupJsonData" :key="groupIndex">
+      <a-row :gutter="16" v-for="(groupItem, groupIndex) in groupJsonData" :key="groupIndex" v-if="!isSimpleInlineMode">
         <a-card v-if="groupItem.groupItems.length > 0" :title="groupItem.name" :bordered="false" size="small">
           <x-form-item
             v-for="(item, index) in groupItem.groupItems"
@@ -106,7 +138,7 @@
             :modifyModelData="modifyModelData"></slot>
         </template>
       </a-row>
-      <a-row :gutter="16" v-for="(item, key) in simpleFormJsonData" :key="'row' + key">
+      <a-row :gutter="16" v-for="(item, key) in simpleFormJsonData" :key="'row' + key" v-if="!isSimpleInlineMode">
         <a-card v-if="item.value.length > 0" :title="item.name" :bordered="false" size="small">
           <x-form-item
             v-for="(formItem, formItemIndex) in item.value"
@@ -242,7 +274,9 @@ export default {
       // 提交按钮位置 start / center / end
       btnPlace: 'center',
       // 子表是否排在前面
-      childTablePriority: false
+      childTablePriority: false,
+      // simple-inline布局配置
+      simpleInline: null
     }
   },
   computed: {
@@ -329,6 +363,12 @@ export default {
       })
     },
     formItemLayoutGen () {
+      if (this.layout === 'simple-inline') {
+        return {
+          labelCol: { span: 0 },
+          wrapperCol: { span: 24 }
+        }
+      }
       if (this.layout === 'horizontal') {
         // 如果启用了自定义配置，从 formItemLayout 读取（支持 0 值）
         if (this.enableHorizontalCustom && this.formItemLayout) {
@@ -360,6 +400,23 @@ export default {
         }
       }
     },
+    // simple-inline模式判断
+    isSimpleInlineMode () {
+      return this.layout === 'simple-inline' && this.simpleInline
+    },
+    // simple-inline布局行数据
+    simpleInlineRows () {
+      if (!this.isSimpleInlineMode) return []
+      return this.simpleInline.rows.map(row => ({
+        ...row,
+        items: row.items.map(item => ({
+          ...item,
+          formItem: this.realJsonData.find(f =>
+            f.model === item.key && f.name === item.title
+          )
+        })).filter(item => item.formItem)
+      }))
+    },
     ...mapState('account', { currUser: 'user' })
   },
   provide () {
@@ -449,7 +506,8 @@ export default {
         formItemLayout = {},
         btnName = '提交',
         childTablePriority = false,
-        btnPlace = 'center'
+        btnPlace = 'center',
+        simpleInline = null
       } = params
       this.loaded = false
       // 兼容需要省略 传递 layout: res.xAddFormLayout 可以使用 ...res 展开运算符 直接转递
@@ -481,6 +539,7 @@ export default {
       this.env = env
       this.btnName = btnName
       this.btnPlace = btnPlace
+      this.simpleInline = simpleInline
       // 如果 fixedAddForm 有 selected_id 值，并且设置了处理表单key值，则多给 selected_id 加前缀 避免处理错误
       if (fixedAddForm.selected_id && this.isHandleFormKey) {
         fixedAddForm._selected_id = fixedAddForm.selected_id
@@ -1192,4 +1251,19 @@ export default {
   font-weight: bold;
   color: @primary-color;
 }
+
+/* simple-inline模式样式 */
+:deep(.simple-inline-item .ant-form-item) {
+  margin: 0 !important;
+  padding: 2px !important;
+
+  .ant-form-item-label {
+    display: none !important;
+  }
+
+  .ant-form-item-control-wrapper,
+  .ant-form-item-control {
+    width: 100% !important;
+  }
+}
 </style>

package/src/base-client/components/common/XAddNativeForm/demo.vue

@@ -33,7 +33,7 @@ export default {
 
 <template>
   <div>
-    <a-card>
+    <a-card :style="{ width: '500px' }">
       <x-add-native-form
         ref="xAddFrom"
         @getinfo="aaa"

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

@@ -1,146 +1,146 @@
-# XAddNativeForm
-
-动态新增/修改表单控件，根据JSON配置生成一个完整的可供新增/修改数据的动态表单
-
-
-## 何时使用
-
-当需要一个可供新增/修改数据的动态生成的表单时
-
-
-引用方式：
-
-```javascript
-import XAddNativeForm from '@vue2-client/base-client/components/XAddNativeForm/XAddNativeForm'
-
-export default {
-    components: {
-      XAddNativeForm
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-add-native-form
-  ref="nativeForm"
-  @onSubmit="submit"/>
-```
-
-## 构造参数，通过init方法构造
-
-| 参数              | 说明                   | 类型    | 默认值    |
-|-----------------|----------------------|-------|--------|
-| formItems       | 表单项集合                | array | []     |
-| viewMode        | 是否为预览模式              | bool  | false  |
-| isHandleFormKey | 是否对提交表单的key进行处理      | bool  | true   |
-| serviceName     | 所属服务模块名              | string | system |
-| businessType    | 业务类型（新增/修改）          | string | -      |
-| title           | 业务标题                 | string | -      |
-| getDataParams   | 调用logic获取下拉框数据源的追加参数 | {}    | -      |
-| simpleFormJsonData   | 动态简易表单集合 | {}    | -      |
-
-## 事件
-| 事件        | 说明                   | 类型    | 默认值       |
-|-----------|----------------------|-------|-----------|
-| @onSubmit | 表单的提交事件              | event | -         |
-
-## 例子1
-----
-```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: 'af-iot',
-              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 | -         |
-
-
-注意事项
-----
-
-> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
+# XAddNativeForm
+
+动态新增/修改表单控件，根据JSON配置生成一个完整的可供新增/修改数据的动态表单
+
+
+## 何时使用
+
+当需要一个可供新增/修改数据的动态生成的表单时
+
+
+引用方式：
+
+```javascript
+import XAddNativeForm from '@vue2-client/base-client/components/XAddNativeForm/XAddNativeForm'
+
+export default {
+    components: {
+      XAddNativeForm
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-add-native-form
+  ref="nativeForm"
+  @onSubmit="submit"/>
+```
+
+## 构造参数，通过init方法构造
+
+| 参数              | 说明                   | 类型    | 默认值    |
+|-----------------|----------------------|-------|--------|
+| formItems       | 表单项集合                | array | []     |
+| viewMode        | 是否为预览模式              | bool  | false  |
+| isHandleFormKey | 是否对提交表单的key进行处理      | bool  | true   |
+| serviceName     | 所属服务模块名              | string | system |
+| businessType    | 业务类型（新增/修改）          | string | -      |
+| title           | 业务标题                 | string | -      |
+| getDataParams   | 调用logic获取下拉框数据源的追加参数 | {}    | -      |
+| simpleFormJsonData   | 动态简易表单集合 | {}    | -      |
+
+## 事件
+| 事件        | 说明                   | 类型    | 默认值       |
+|-----------|----------------------|-------|-----------|
+| @onSubmit | 表单的提交事件              | event | -         |
+
+## 例子1
+----
+```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: 'af-iot',
+              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 | -         |
+
+
+注意事项
+----
+
+> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果