fix(component): fix schema-form vIf logic #83

Author: buqiyuan

README.md

@@ -13,6 +13,35 @@
 - [gitee 地址](https://gitee.com/buqiyuan/vue3-antd-admin)
 - 根据 JSON 生成 typescript 的工具：[http://json2ts.com/](http://json2ts.com/)
 
+## 安装使用
+
+- 获取项目代码
+
+```bash
+git clone https://github.com/buqiyuan/vue3-antd-admin
+```
+
+- 安装依赖
+
+```bash
+cd vue3-antd-admin
+
+yarn install
+
+```
+
+- 运行
+
+```bash
+yarn serve
+```
+
+- 打包
+
+```bash
+yarn build
+```
+
 ## vscode 配置
 
 安装项目根目录.vscode 推荐的插件，再安装 Volar，并禁用 Vetur，重启 vscode 即可。
@@ -31,18 +60,28 @@
 - [ ] 纯前端导出 PDF 自动分页
 - [ ] 其他...
 
-### Project setup
-
-```shell
-yarn install
-# 或
-yarn --frozen-lockfile
-```
-
 ## 更新日志
 
 [CHANGELOG](./CHANGELOG.md)
 
+## Git 贡献提交规范
+
+- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
+
+  - `feat` 增加新功能
+  - `fix` 修复问题/BUG
+  - `style` 代码风格相关无影响运行结果的
+  - `perf` 优化/性能提升
+  - `refactor` 重构
+  - `revert` 撤销修改
+  - `test` 测试相关
+  - `docs` 文档/注释
+  - `chore` 依赖更新/脚手架配置修改等
+  - `workflow` 工作流改进
+  - `ci` 持续集成
+  - `types` 类型定义文件更改
+  - `wip` 开发中
+
 ### 赞赏
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!

package.json

@@ -30,30 +30,30 @@
     "@vueuse/core": "^7.5.5",
     "ant-design-vue": "3.0.0-beta.9",
     "axios": "^0.25.0",
-    "core-js": "^3.20.3",
+    "core-js": "^3.21.0",
     "dayjs": "^1.10.7",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^1.0.0-1",
-    "pinia": "2.0.10",
+    "pinia": "2.0.11",
     "qs": "^6.10.3",
     "socket.io-client": "4.4.1",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.29",
     "vue-i18n": "^9.2.0-beta.30",
     "vue-router": "^4.0.12",
-    "xlsx": "^0.17.5"
+    "xlsx": "^0.18.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.1.0",
     "@commitlint/config-conventional": "^16.0.0",
     "@types/lodash-es": "^4.17.5",
-    "@types/node": "^17.0.13",
+    "@types/node": "^17.0.14",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
     "@vue/cli-plugin-babel": "^5.0.0-rc.2",
     "@vue/cli-plugin-eslint": "^5.0.0-rc.2",
     "@vue/cli-plugin-router": "^5.0.0-rc.2",
@@ -73,7 +73,7 @@
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "less-loader": "10.2.0",
-    "lint-staged": "^12.3.2",
+    "lint-staged": "^12.3.3",
     "path-browserify": "^1.0.1",
     "postcss-html": "^1.3.0",
     "prettier": "^2.5.1",

src/components/core/schema-form/schema-form-item.vue

@@ -214,13 +214,8 @@
       label,
       dynamicRules,
       required,
-      field,
     } = props.schemaItem;
 
-    if (field == 'field5') {
-      console.log('rules', props.schemaItem);
-    }
-
     if (isFunction(dynamicRules)) {
       return dynamicRules(unref(getValues)) as ValidationRule[];
     }

src/components/core/schema-form/schema-form.vue

@@ -134,9 +134,7 @@
             show = isShow({ schemaItem: formItem, formModel, field: formItem.field });
           }
           if (Object.is(show, false) && key === 'vIf') {
-            formModel[formItem.field] = undefined;
-          } else if (Object.is(show, true) && key === 'vIf') {
-            formModel[formItem.field] = cacheFormModel[formItem.field];
+            Reflect.deleteProperty(formModel, formItem.field);
           }
           return show;
         } else {

src/views/demos/form/basic-form/form-schema.ts

@@ -1,6 +1,45 @@
 import type { FormItemSchema } from '@/components/core/schema-form/types/form';
 
 export const schemas: FormItemSchema[] = [
+  {
+    field: 'type',
+    component: 'RadioGroup',
+    label: '类型',
+    defaultValue: 1,
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      options: [
+        {
+          label: '类型一',
+          value: 1,
+        },
+        {
+          label: '类型二',
+          value: 2,
+        },
+      ],
+    },
+  },
+  {
+    field: 'isExtenal',
+    component: 'Switch',
+    label: '是否外链',
+    colProps: {
+      span: 8,
+    },
+    vIf: ({ formModel }) => formModel['type'] === 2,
+  },
+  {
+    field: 'isEbed',
+    component: 'Switch',
+    label: '是否内嵌',
+    colProps: {
+      span: 8,
+    },
+    vIf: ({ formModel }) => formModel['type'] === 2 && formModel['isExtenal'],
+  },
   {
     field: 'field1',
     component: 'Input',