vue2-client 1.15.117 → 1.15.119

package/Components.md

@@ -1,60 +1,60 @@
-# vue2基础组件库组件介绍
-
-## XAddForm
-
-基于XAddNativeForm二次封装的动态表单的Modal形式
-
-[使用文档](src/base-client/components/common/XAddForm/index.md)
-
-## XAddNativeForm
-
-通过JSON配置动态生成的数据保存表单
-
-[使用文档](src/base-client/components/common/XAddNativeForm/index.md)
-
-## XBadge
-
-对antdv的badge组件进行重封装
-
-[使用文档](src/base-client/components/common/XBadge/index.md)
-
-## XCard
-
-通用数据加载状态管理容器
-
-提供一个可以根据数据加载状态显示不同内容的通用容器
-当loadState为loading时，显示骨架屏（加载界面）
-当loadState为success时，显示容器内容
-当loadState为error时，显示点击重新加载数据的提示界面
-
-[使用文档](src/base-client/components/common/XCard/index.md)
-
-## XForm
-
-通过JSON配置动态生成的数据筛选查询表单
-
-[使用文档](src/base-client/components/common/XForm/index.md)
-
-## XTable
-
-通过JSON配置动态生成的数据表格
-
-[使用文档](src/base-client/components/common/XTable/index.md)
-
-## XFormCol
-
-适用于动态表单的可以自适应各种分辨率设备的栅格组件封装
-
-[使用文档](src/base-client/components/common/XFormCol/index.md)
-
-## XFormTable
-
-对XAddForm，XForm和XTable组件的二次封装，实现通过JSON配置动态生成一个完整的实体操作页面
-
-[使用文档](src/base-client/components/common/XFormTable/index.md)
-
-## XImportExcel
-
-通用的导入excel组件
-
-[使用文档](src/base-client/components/common/XImportExcel/index.md)
+# vue2基础组件库组件介绍
+
+## XAddForm
+
+基于XAddNativeForm二次封装的动态表单的Modal形式
+
+[使用文档](src/base-client/components/common/XAddForm/index.md)
+
+## XAddNativeForm
+
+通过JSON配置动态生成的数据保存表单
+
+[使用文档](src/base-client/components/common/XAddNativeForm/index.md)
+
+## XBadge
+
+对antdv的badge组件进行重封装
+
+[使用文档](src/base-client/components/common/XBadge/index.md)
+
+## XCard
+
+通用数据加载状态管理容器
+
+提供一个可以根据数据加载状态显示不同内容的通用容器
+当loadState为loading时，显示骨架屏（加载界面）
+当loadState为success时，显示容器内容
+当loadState为error时，显示点击重新加载数据的提示界面
+
+[使用文档](src/base-client/components/common/XCard/index.md)
+
+## XForm
+
+通过JSON配置动态生成的数据筛选查询表单
+
+[使用文档](src/base-client/components/common/XForm/index.md)
+
+## XTable
+
+通过JSON配置动态生成的数据表格
+
+[使用文档](src/base-client/components/common/XTable/index.md)
+
+## XFormCol
+
+适用于动态表单的可以自适应各种分辨率设备的栅格组件封装
+
+[使用文档](src/base-client/components/common/XFormCol/index.md)
+
+## XFormTable
+
+对XAddForm，XForm和XTable组件的二次封装，实现通过JSON配置动态生成一个完整的实体操作页面
+
+[使用文档](src/base-client/components/common/XFormTable/index.md)
+
+## XImportExcel
+
+通用的导入excel组件
+
+[使用文档](src/base-client/components/common/XImportExcel/index.md)

package/Users/objecrt/af-vue2-client/src/base-client/components/his/XShiftSchedule/XShiftSchedule.vue

@@ -0,0 +1,213 @@
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  data () {
+    return {
+      // 输入框数据
+      inputData: [],
+      // 模式
+      pattern: 'schedule',
+      data: [],
+      // 列配置
+      columns: [],
+      // 列名
+      columnNames: [],
+      // 选中的行键值集合
+      selectedRows: [],
+      // 选中的行信息集合
+      selectedRowKeys: [],
+      // 原始数据备份
+      originalData: [],
+      // 配置参数
+      configData: {},
+      // 当前显示的周次日期
+      currentWeekDates: [],
+      weekDays: [...['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((title, index) => {
+        const key = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'][index]
+        return { title, key }
+      })],
+      // 排班时间表
+      shiftTable: [...['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((title, index) => {
+          const key = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'][index]
+          return {
+            key, dataIndex: key, scopedSlots: { customRender: key }, slots: { title: key }, align: 'center', width: key === 'Monday' || key === 'Sunday' ? 170 : 120
+          }
+        }),
+        {
+          title: '排班数',
+          key: 'sk_limit',
+          dataIndex: 'sk_limit',
+          scopedSlots: { customRender: 'sk_limit' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  props: {
+    // 配置名
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    // 服务名
+    serviceName: {
+      type: String,
+      default: 'af-his'
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: (selectedRowKeys, selectedRows) => {
+          this.onSelectChange(selectedRowKeys, selectedRows)
+        }
+      }
+    }
+  },
+  mounted () {
+    this.initWeekDates()
+  },
+  methods: {
+    handleShiftChange (day, index, record) {
+      // 找到当前记录在data中的索引
+      const dataIndex = this.data.findIndex(item => item.id === record.id)
+      if (dataIndex === -1) return
+      // 获取当前状态
+      const currentValue = record[day][index]
+      const newValue = currentValue === 1 || currentValue === '1' ? 0 : 1
+      // 更新按钮显示
+      this.$set(record[day], index, newValue)
+      // 同步更新data中的数据
+      this.$set(this.data[dataIndex][day], index, newValue)
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    // 获取选中的行数据
+    getSelectedRowData () {
+      return this.selectedRows
+    },
+    // 获取全部数据
+    getAllTable () {
+      return this.data
+    },
+    // 初始化数据
+    async init (queryParamsName) {
+      getConfigByName(queryParamsName, this.serviceName, result => {
+        this.configData = result
+        runLogic(result.dataSource, {}, this.serviceName).then(res => {
+          this.columns = []
+          this.columns = JSON.parse(JSON.stringify(this.configData.columns))
+          this.pattern = result.pattern
+          if (this.pattern == 'schedule') {
+            for (let i = 0; i < this.shiftTable.length; i++) {
+              this.columns.push(this.shiftTable[i])
+            }
+            if (res && Array.isArray(res)) {
+              const weekDays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
+              const shifts = ['am', 'pm', 'evening']
+              let key = 0
+              this.data = res.map(item => {
+                const scheduleData = {
+                  key: key++
+                }
+                this.configData.columnsName.forEach(columnName => { scheduleData[columnName] = item[columnName] })
+                weekDays.forEach(day => {
+                  scheduleData[day.charAt(0).toUpperCase() + day.slice(1)] = shifts.map(shift => item[`f_${day}_${shift}`] === '1' ? 1 : 0)
+                })
+                return scheduleData
+              })
+              // 保存原始数据
+              this.originalData = JSON.parse(JSON.stringify(this.data))
+            }
+          } else if (this.pattern == 'form') {
+            // 数据格式化：将原始数据转换为包含所有输入字段的格式
+            const inputFields = this.configData.columns
+              .filter(col => col.type === 'input')
+              .map(col => col.dataIndex)
+            this.data = res.map(item => {
+              const newItem = { ...item }
+              // 初始化所有输入框字段
+              inputFields.forEach(field => {
+                // 获取该字段对应的列配置，以确定row的长度
+                const column = this.configData.columns.find(col => col.dataIndex === field)
+                if (column && column.type === 'input' && column.row) {
+                  const rowCount = column.row.length
+                  // 如果item中已有该字段且为数组，保持原样，否则初始化为空数组
+                  newItem[field] = Array.isArray(item[field]) ? item[field] : Array(rowCount).fill('')
+                } else {
+                  newItem[field] = item[field] || ''
+                }
+              })
+              return newItem
+            })
+          }
+        })
+      })
+    },
+    // 查询数据函数
+    filterTableData (filters) {
+      if (!filters || Object.keys(filters).length === 0) {
+        // 如果没有过滤条件，恢复原始数据
+        this.data = JSON.parse(JSON.stringify(this.originalData))
+        return
+      }
+      // 从原始数据开始过滤
+      this.data = this.originalData.filter(item => {
+        // 检查每一项是否满足所有过滤条件
+        return Object.entries(filters).every(([key, value]) => {
+          // 如果过滤值是字符串，进行模糊匹配
+          if (typeof value === 'string') {
+            return item[key] && item[key].toString().toLowerCase().includes(value.toLowerCase())
+          }
+          // 如果过滤值是数字，进行精确匹配
+          return item[key] === value
+        })
+      })
+    },
+    // 初始化周次日期
+    initWeekDates () {
+      const today = new Date()
+      const currentDay = today.getDay() || 7 // 将周日的0转换为7
+      const monday = new Date(today)
+      monday.setDate(today.getDate() - currentDay + 1) // 设置为本周一
+      this.currentWeekDates = Array.from({ length: 7 }, (_, index) => {
+        const date = new Date(monday)
+        date.setDate(monday.getDate() + index)
+        return date
+      })
+    },
+    // 切换到上一周
+    handleLastWeek () {
+      const monday = new Date(this.currentWeekDates[0])
+      monday.setDate(monday.getDate() - 7)
+      this.updateWeekDates(monday)
+    },
+    // 切换到下一周
+    handleNextWeek () {
+      const monday = new Date(this.currentWeekDates[0])
+      monday.setDate(monday.getDate() + 7)
+      this.updateWeekDates(monday)
+    },
+    // 更新周次日期
+    updateWeekDates (monday) {
+      this.currentWeekDates = Array.from({ length: 7 }, (_, index) => {
+        const date = new Date(monday)
+        date.setDate(monday.getDate() + index)
+        return date
+      })
+    }
+  },
+  watch: {
+    queryParamsName: {
+      handler (newValue) {
+        this.init(newValue)
+      },
+      deep: true,
+      immediate: true
+    }
+  }
+}
+</script>

package/docs/LowCode/lowcode.md

@@ -1,155 +1,155 @@
-# 奥枫低代码平台
-
-> 奥枫低代码平台是一个前端低代码框架，它使用JSON配置来生成页面
-
-
-
-## 概念
-
-### 配置与组件
-
-#### 结构
-
-> 一个配置的结构是这样的
->
-> ```json
-> {
->     "page": [
->         {
->             "id": "page_tvV9Ci",
->             "type": "page",
->             "title": "11",
->             "body": [
->                 {
->                     "id": "page_tvV9Ci_0",
->                     "config": {
->                         "align": "top",
->                         "gutter": 0,
->                         "justify": "start"
->                     },
->                     "type": "row",
->                     "body": [
->                         {
->                             "type": "XFormTable",
->                             "selected": false,
->                             "span": 24,
->                             "id": "XFormTable_76UItw",
->                             "props": {
->                                 "queryParamsName": "",
->                                 "serviceName": ""
->                             },
->                             "selfEvent": [
->                                 "action"
->                             ]
->                         }
->                     ]
->                 }
->             ]
->         }
->     ]
-> }
-> ```
-> page下的每一个对象，表示一个`页面容器`
->
-> body中的每一个对象，表示一`行`
->
-> 每行中body下的每个元素，表示一个`组件`
-
-> 组件的完整配置是这样的
->
-> ```json
-> {
->     "type": "xx组件",
->     "span": 12,
->     "id": "xx组件_001",
->     "selected": false,
->     "props": {
->         "值1": "111",
->         "值2": "222",
->         ...
->     },
->     "selfEvent": [
->         "action",
->         ...
->     ],
->     "onEvent": {
->         "action": [
->             {
->                 "emitType": "action",
->                 "eventType": "changeValue",
->                 "target": "组件_00x",
->                 "targetKey": "data"
->             },
->     	{...}
->         ]
->     }
-> }
-> ```
->
-> `type`定义了组件的类型
->
-> `span`定义了组件的宽度
->
-> `selected`定义了组件当前是否被选中
->
-> `id`表示组件的唯一标识
->
-> `props`中定义的是组件可以被改变的值
->
-> `selfEvent`定义了组件可以发出哪些事件交给低代码平台处理
->
-> `onEvent`表示每一个事件的具体定义
->
-> `onEvent`中的每一个对象的key代表了是针对哪种事件的处理
-
-> 在低代码平台中，最小的单位是`组件`，最大的单位是`页面容器`
-
-
-
-#### 页面容器
-
-> 一个`页面容器`可以是`页面`，`弹框`，`抽屉`等
->
-> `页面容器`是所有`组件`的容器，`组件`组成了`行`，`行`组成了`页面`
-
-
-
-#### 组件
-
-> `组件`是低代码平台的最小单位
->
-> 一个组件是某种功能的封装，比如XFormTable是为了展示CRUD表单，XTree是为了展示树型结构
-
-
-
-#### 组件的拆分
-
-> 如同栅格化布局一样，每一行套每一列
->
-> 某个列又可被看做一个整体，在其下继续拆分为多行，每行又包含多列
-
-> 比如一个页面，左侧是导航栏，右侧是内容栏
->
-> 这就是第一行，第一行分为两列，左侧列是导航栏，右侧列是内容栏
->
-> 内容栏又被分为了两行
->
-> 第一行是标题，第二行是主要内容
-
-
-
-### 事件
-
-> 在组件中，会因为各种各样的原因，修改一些状态，比如点击搜索，切换标签
->
-> 这些改动，要通过`事件`的形式，向外层触发，来通知其他组件进行联动。比如在树组件中切换了标签，根据不同的标签在CRUD表单中渲染不同的内容
->
-> 这个时候我们就需要对触发改动的`组件`添加`事件`，比如在XFormTable中点击详情，我们希望打开一个抽屉，我们就需要为XFormTable添加一个点击详情的事件
-
-
-
-### 行为
-
-> 行为是`组件`自身内部进行的一系列变动。比如其他组件触发了某个`事件`，这个`组件`需要对这个`事件`进行响应，并在自身内部进行一系列的更新。这就是一种行为
->
-> 还是刚才的例子在XFormTable中点击详情，我们希望打开一个抽屉。那抽屉改变自身的显隐，就是响应点击详情`事件`的一种`行为`
+# 奥枫低代码平台
+
+> 奥枫低代码平台是一个前端低代码框架，它使用JSON配置来生成页面
+
+
+
+## 概念
+
+### 配置与组件
+
+#### 结构
+
+> 一个配置的结构是这样的
+>
+> ```json
+> {
+>     "page": [
+>         {
+>             "id": "page_tvV9Ci",
+>             "type": "page",
+>             "title": "11",
+>             "body": [
+>                 {
+>                     "id": "page_tvV9Ci_0",
+>                     "config": {
+>                         "align": "top",
+>                         "gutter": 0,
+>                         "justify": "start"
+>                     },
+>                     "type": "row",
+>                     "body": [
+>                         {
+>                             "type": "XFormTable",
+>                             "selected": false,
+>                             "span": 24,
+>                             "id": "XFormTable_76UItw",
+>                             "props": {
+>                                 "queryParamsName": "",
+>                                 "serviceName": ""
+>                             },
+>                             "selfEvent": [
+>                                 "action"
+>                             ]
+>                         }
+>                     ]
+>                 }
+>             ]
+>         }
+>     ]
+> }
+> ```
+> page下的每一个对象，表示一个`页面容器`
+>
+> body中的每一个对象，表示一`行`
+>
+> 每行中body下的每个元素，表示一个`组件`
+
+> 组件的完整配置是这样的
+>
+> ```json
+> {
+>     "type": "xx组件",
+>     "span": 12,
+>     "id": "xx组件_001",
+>     "selected": false,
+>     "props": {
+>         "值1": "111",
+>         "值2": "222",
+>         ...
+>     },
+>     "selfEvent": [
+>         "action",
+>         ...
+>     ],
+>     "onEvent": {
+>         "action": [
+>             {
+>                 "emitType": "action",
+>                 "eventType": "changeValue",
+>                 "target": "组件_00x",
+>                 "targetKey": "data"
+>             },
+>     	{...}
+>         ]
+>     }
+> }
+> ```
+>
+> `type`定义了组件的类型
+>
+> `span`定义了组件的宽度
+>
+> `selected`定义了组件当前是否被选中
+>
+> `id`表示组件的唯一标识
+>
+> `props`中定义的是组件可以被改变的值
+>
+> `selfEvent`定义了组件可以发出哪些事件交给低代码平台处理
+>
+> `onEvent`表示每一个事件的具体定义
+>
+> `onEvent`中的每一个对象的key代表了是针对哪种事件的处理
+
+> 在低代码平台中，最小的单位是`组件`，最大的单位是`页面容器`
+
+
+
+#### 页面容器
+
+> 一个`页面容器`可以是`页面`，`弹框`，`抽屉`等
+>
+> `页面容器`是所有`组件`的容器，`组件`组成了`行`，`行`组成了`页面`
+
+
+
+#### 组件
+
+> `组件`是低代码平台的最小单位
+>
+> 一个组件是某种功能的封装，比如XFormTable是为了展示CRUD表单，XTree是为了展示树型结构
+
+
+
+#### 组件的拆分
+
+> 如同栅格化布局一样，每一行套每一列
+>
+> 某个列又可被看做一个整体，在其下继续拆分为多行，每行又包含多列
+
+> 比如一个页面，左侧是导航栏，右侧是内容栏
+>
+> 这就是第一行，第一行分为两列，左侧列是导航栏，右侧列是内容栏
+>
+> 内容栏又被分为了两行
+>
+> 第一行是标题，第二行是主要内容
+
+
+
+### 事件
+
+> 在组件中，会因为各种各样的原因，修改一些状态，比如点击搜索，切换标签
+>
+> 这些改动，要通过`事件`的形式，向外层触发，来通知其他组件进行联动。比如在树组件中切换了标签，根据不同的标签在CRUD表单中渲染不同的内容
+>
+> 这个时候我们就需要对触发改动的`组件`添加`事件`，比如在XFormTable中点击详情，我们希望打开一个抽屉，我们就需要为XFormTable添加一个点击详情的事件
+
+
+
+### 行为
+
+> 行为是`组件`自身内部进行的一系列变动。比如其他组件触发了某个`事件`，这个`组件`需要对这个`事件`进行响应，并在自身内部进行一系列的更新。这就是一种行为
+>
+> 还是刚才的例子在XFormTable中点击详情，我们希望打开一个抽屉。那抽屉改变自身的显隐，就是响应点击详情`事件`的一种`行为`