vue2-client 1.8.40 → 1.8.43

package/CHANGELOG.md

@@ -1,7 +1,7 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
-**1.8.37 - 1.8.40 -2024-1-30 @江超**
+**1.8.37 - 1.8.41 -2024-1-30 @江超**
 - 开发环境增加水印
 
 **1.8.36 -2024-1-25 @江超**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.40",
+  "version": "1.8.43",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

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

@@ -104,14 +104,13 @@ export default {
       getDataParams: {},
       // 是否为临时表
       isTableTemp: false,
+      // 是否处理表单key
+      isKeyHandle: true,
       // 动态简易表单集合
       simpleFormJsonData: {}
     }
   },
   computed: {
-    businessTitle () {
-      return this.businessType + this.title
-    },
     // 过滤出用于新增/修改场景的表单项
     realJsonData: function () {
       return this.formItems.filter((item) => {
@@ -151,7 +150,7 @@ export default {
   methods: {
     init (params) {
       const {
-        configName, configContent, formItems, viewMode, isHandleFormKey = true, showSubmitBtn = true, serviceName, isTableTemp = false, modifyModelData = {}, businessType, title, fixedAddForm = {}, getDataParams = {}, simpleFormJsonData = {}
+        configName, configContent, formItems, viewMode, isHandleFormKey = true, showSubmitBtn = true, serviceName, isTableTemp = false, isKeyHandle = true, modifyModelData = {}, businessType, title, fixedAddForm = {}, getDataParams = {}, simpleFormJsonData = {}
       } = params
       this.loaded = false
       this.configName = configName
@@ -170,6 +169,7 @@ export default {
       this.getDataParams = getDataParams
       this.simpleFormJsonData = simpleFormJsonData
       this.isTableTemp = isTableTemp
+      this.isKeyHandle = isKeyHandle
       // 设置普通表单项的相关参数
       const formData = Object.assign({}, fixedAddForm)
       for (let i = 0; i < this.realJsonData.length; i++) {
@@ -340,7 +340,7 @@ export default {
             }
             realForm[extraFormKey][realKey] = value
           } else {
-            const realKey = this.getRealKey(key)
+            const realKey = this.isKeyHandle ? this.getRealKey(key) : key
             realForm[realKey] = value
           }
         }
@@ -402,7 +402,7 @@ export default {
       }
       // 对动态简易表单项特殊处理
       for (const key in modifyModelData.data) {
-        const realKey = this.getRealKey(key)
+        const realKey = this.isKeyHandle ? this.getRealKey(key) : key
         if (this.simpleFormJsonData[realKey]) {
           const extraForm = JSON.parse(modifyModelData.data[key])
           for (const key in extraForm) {

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

@@ -0,0 +1,288 @@
+<template>
+  <div class="table-page-search-wrapper">
+    <a-form-model
+        v-if="loaded"
+        ref="selectForm"
+        :zIndex="1001"
+        :model="form"
+        :rules="rules">
+      <a-row :gutter="16">
+        <x-form-item
+            v-for="(item, index) in realJsonData"
+            :key="index"
+            :attr="item"
+            :disabled="itemDisabled(item)"
+            :files="files"
+            :form="form"
+            :images="images"
+            :service-name="serviceName"
+            :xl="12"
+            :xxl="8"
+            mode="新增/修改"
+        />
+      </a-row>
+    </a-form-model>
+  </div>
+</template>
+<script>
+import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
+import { formatDate } from '@vue2-client/utils/util'
+import { mapState } from 'vuex'
+import { post } from '@vue2-client/services/api'
+
+export default {
+  name: 'XAddNativeFormOA',
+  components: {
+    XFormItem
+  },
+  data () {
+    return {
+      // 内容加载是否完成
+      loaded: false,
+      // 表单Model
+      form: {},
+      // 修改有文件得表单时使用
+      files: [],
+      images: [],
+      // 校验
+      rules: {}
+    }
+  },
+  computed: {
+    // 过滤出用于新增/修改场景的表单项
+    realJsonData: function () {
+      return this.jsonData.filter(function (item) {
+        return item.addOrEdit && item.addOrEdit !== 'no' && item.addOrEdit !== 'silenceAdd' && item.addOrEdit !== 'version'
+      })
+    },
+    // 过滤出用于静默新增场景的表单项
+    silenceAddJsonData: function () {
+      return this.jsonData.filter(function (item) {
+        return item.addOrEdit === 'silenceAdd'
+      })
+    },
+    // 过滤出版本号表单项
+    versionJsonData: function () {
+      return this.jsonData.filter(function (item) {
+        return item.addOrEdit === 'version'
+      })
+    },
+    ...mapState('account', { currUser: 'user' })
+  },
+  props: {
+    jsonData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    serviceName: {
+      type: String,
+      default: 'af-system'
+    },
+    // 业务类型
+    businessType: {
+      type: String,
+      default: ''
+    },
+    // 修改操作前查询出的业务数据
+    modifyModelData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 新增或修改业务是否执行中
+    loading: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    // 固定新增表单
+    fixedAddForm: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    nowStepContent: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  watch: {
+    visible (rel) {
+      if (rel) {
+        this.formItemLoad()
+      }
+    }
+  },
+  mounted () {
+    this.formItemLoad()
+    if (this.nowStepContent) {
+      this.form = this.nowStepContent
+    }
+  },
+  methods: {
+    formItemLoad () {
+      const formData = Object.assign({}, this.fixedAddForm)
+      for (let i = 0; i < this.realJsonData.length; i++) {
+        const item = this.realJsonData[i]
+        formData[item.model] = undefined
+        // 处理表单校验情况
+        if (item.rule) {
+          this.rules[item.model] = []
+          const required = item.rule.required ? item.rule.required === true || item.rule.required === 'true' : false
+          let trigger
+          let message
+          if (required) {
+            switch (item.type) {
+              case 'select':
+                message = '请选择' + item.name
+                trigger = 'change'
+                break
+              default:
+                message = '请输入' + item.name
+                trigger = 'blur'
+            }
+            this.rules[item.model].push({
+              required: true,
+              message: message,
+              trigger: trigger
+            })
+          }
+
+          switch (item.rule.type) {
+            case 'number':
+            case 'integer':
+            case 'float':
+              let defaultValue
+              let message
+              switch (item.rule.type) {
+                case 'number':
+                  message = '数字'
+                  defaultValue = 0
+                  break
+                case 'integer':
+                  message = '整数'
+                  defaultValue = 0
+                  break
+                case 'float':
+                  message = '小数'
+                  defaultValue = 0.0
+                  break
+              }
+              this.rules[item.model].push({
+                type: item.rule.type,
+                message: item.name + '必须为' + message,
+                transform: (value) => {
+                  if (value && value.length !== 0) {
+                    return Number(value)
+                  } else {
+                    return defaultValue
+                  }
+                },
+                trigger: 'blur'
+              })
+              break
+          }
+        }
+      }
+      this.form = formData
+      if (this.modifyModelData.data) {
+        this.files = this.modifyModelData.files
+        this.images = this.modifyModelData.images
+        if (Object.keys(this.modifyModelData.data).length > 0) {
+          this.getModifyModelData()
+        }
+      }
+      this.loaded = true
+    },
+    itemDisabled (value) {
+      return (this.businessType === '新增' && value.addOrEdit === 'edit') ||
+          (this.businessType === '修改' && value.addOrEdit === 'add')
+    },
+    async onSubmit () {
+      this.$refs.selectForm.validate(async valid => {
+        for (const key of Object.keys(this.form)) {
+          if (this.form[key] === null || this.form[key] === '') {
+            this.form[key] = undefined
+          }
+        }
+        const requestForm = Object.assign({}, this.form)
+        // 追加静默新增字段
+        if (this.businessType === '新增') {
+          for (const item of this.silenceAddJsonData) {
+            switch (item.silencePurpose) {
+              case 'createTime':
+                requestForm[item.model] = formatDate('now')
+                break
+              case 'operator':
+                requestForm[item.model] = this.currUser.name
+                break
+              case 'orgId':
+                requestForm[item.model] = this.currUser.orgid
+                break
+            }
+          }
+          // 通过请求追加静默新增：自定义字段
+          for (const item of this.silenceAddJsonData.filter((item) => item.silencePurpose === 'customize')) {
+            requestForm[item.model] = await this.getSilenceSource(item.silenceSource, requestForm)
+          }
+        }
+        const data = {
+          valid: valid,
+          form: requestForm
+        }
+        this.$emit('onSubmit', data)
+      })
+    },
+    /**
+     * 获取通过logic静默新增的字段
+     * @param logicName logic名称
+     * @param requestParameters 请求参数
+     */
+    async getSilenceSource (logicName, requestParameters) {
+      const result = await post('/api/' + this.serviceName + '/logic/' + logicName, requestParameters)
+      return result
+    },
+    /**
+     * 获取被修改记录数据
+     * @param modifyModelData 被修改记录的数据
+     */
+    getModifyModelData () {
+      for (let i = 0; i < this.realJsonData.length; i++) {
+        if (['FilesId', 'Images'].includes(this.realJsonData[i])) {
+          // 附件需要跳过 因为会通过 modifyModelData中的files,images属性给upload赋值
+          // 新增修改表单每次提交时只会提交最新添加的文件
+          continue
+        }
+        const item = this.realJsonData[i]
+        if (this.modifyModelData.data[item.model] || this.modifyModelData.data[item.model] === 0) {
+          if (this.modifyModelData.data[item.model] instanceof Array) {
+            this.form[item.model] = this.modifyModelData.data[item.model]
+          } else {
+            this.form[item.model] = this.modifyModelData.data[item.model] + ''
+          }
+        } else {
+          this.form[item.model] = undefined
+        }
+      }
+      // 追加版本号信息
+      for (const item of this.versionJsonData) {
+        if (!this.modifyModelData.data[item.model]) {
+          this.form[item.model] = 0
+        } else {
+          this.form[item.model] = this.modifyModelData.data[item.model] + ''
+        }
+      }
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>

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

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

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

@@ -0,0 +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 | -         |
+
+
+注意事项
+----
+
+> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果

package/src/services/api/common.js

@@ -35,6 +35,8 @@ const commonApi = {
   fileEntity: 'entity/t_files',
   // 获取所有员工及其部门的级联菜单数据
   getEmpTree: '/api/af-system/logic/getEmpTree',
+  // 获取表格列配置
+  getColumnsJson: '/api/af-system/logic/getColumns',
 }
 
 export function getConfigUrl (serviceName = process.env.VUE_APP_SYSTEM_NAME) {

package/src/utils/waterMark.js

@@ -1,31 +1,31 @@
-/**
- * @description: createWaterMark.js 加水印功能
- */
-let waterMarkDOM
-
-const clearWaterMark = () => {
-  if (waterMarkDOM) waterMarkDOM.remove()
-}
-/**
- * @description: 创建水印
- * @param waterMarkName 水印内容
- */
-export default function createWaterMark (waterMarkName) {
-  clearWaterMark()
-  if (!waterMarkName) {
-    return
-  }
-  const width = window.parseInt(document.body.clientWidth)
-  const canvasWidth = width / window.parseInt(width / 320)
-  const fontFamily = window.getComputedStyle(document.body)['font-family']
-  const fragment = document.createDocumentFragment()
-  waterMarkDOM = document.createElement('div')
-  waterMarkDOM.className = 'water-mark-wrap'
-  let spanStr = ''
-  for (let i = 0; i < 100; i++) {
-    spanStr += `<span class="water-word" style=width:${canvasWidth}px;height:200px;font: ${fontFamily}>${waterMarkName}</span>`
-  }
-  waterMarkDOM.innerHTML = spanStr
-  fragment.appendChild(waterMarkDOM)
-  document.body.appendChild(fragment)
-}
+/**
+ * @description: createWaterMark.js 加水印功能
+ */
+let waterMarkDOM
+
+const clearWaterMark = () => {
+  if (waterMarkDOM) waterMarkDOM.remove()
+}
+/**
+ * @description: 创建水印
+ * @param waterMarkName 水印内容
+ */
+export default function createWaterMark (waterMarkName) {
+  clearWaterMark()
+  if (!waterMarkName) {
+    return
+  }
+  const width = window.parseInt(document.body.clientWidth)
+  const canvasWidth = width / window.parseInt(width / 320)
+  const fontFamily = window.getComputedStyle(document.body)['font-family']
+  const fragment = document.createDocumentFragment()
+  waterMarkDOM = document.createElement('div')
+  waterMarkDOM.className = 'water-mark-wrap'
+  let spanStr = ''
+  for (let i = 0; i < 100; i++) {
+    spanStr += `<span class="water-word" style=width:${canvasWidth}px;height:200px;font: ${fontFamily}>${waterMarkName}</span>`
+  }
+  waterMarkDOM.innerHTML = spanStr
+  fragment.appendChild(waterMarkDOM)
+  document.body.appendChild(fragment)
+}