From 80493dd9004cd415e6fd6c64b277d7ed0039bee6 Mon Sep 17 00:00:00 2001
From: lvhuaisheng <lvhuaisheng_k@163.com>
Date: Wed, 27 Jul 2022 18:02:30 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=9F=BA=E6=9C=AC=E8=A7=A6=E5=8F=91=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/naiveui/FormDesign.vue         | 12 ++-
 .../components/design/DesignConfig.vue        | 86 +++++++++++++++++++
 .../naiveui/components/design/DesignForm.vue  |  1 +
 .../components/design/DesignFormItem.vue      | 18 +++-
 .../components/generate/GenerateForm.vue      |  1 +
 .../components/generate/GenerateFormItem.vue  |  9 +-
 src/components/naiveui/config/naiveui.ts      | 37 +++++++-
 src/components/naiveui/mixins/eventMixin.js   | 31 +++++++
 src/components/naiveui/styles/index.less      |  6 ++
 9 files changed, 191 insertions(+), 10 deletions(-)
 create mode 100644 src/components/naiveui/mixins/eventMixin.js

diff --git a/src/components/naiveui/FormDesign.vue b/src/components/naiveui/FormDesign.vue
index 4a4b2cf..6b5f9aa 100644
--- a/src/components/naiveui/FormDesign.vue
+++ b/src/components/naiveui/FormDesign.vue
@@ -248,10 +248,20 @@ export default defineComponent({
   },
   setup() {
     const message = useMessage()
+
+    let widgetForm = JSON.parse(JSON.stringify(naiveui.widgetForm));
+    for (let key in naiveui.widgetForm) {
+      if (naiveui.widgetForm.hasOwnProperty(key)) {
+        if(typeof naiveui.widgetForm[key] === 'function') {
+          widgetForm[key] = naiveui.widgetForm[key];
+        }
+      }
+    }
+
     const state = reactive({
       naiveui,
       codeType: CodeType,
-      widgetForm: JSON.parse(JSON.stringify(naiveui.widgetForm)),
+      widgetForm: widgetForm,
       widgetFormSelect: undefined,
       generateFormRef: null as any,
       configTab: 'widget',
diff --git a/src/components/naiveui/components/design/DesignConfig.vue b/src/components/naiveui/components/design/DesignConfig.vue
index 611dc29..2c6ad2b 100644
--- a/src/components/naiveui/components/design/DesignConfig.vue
+++ b/src/components/naiveui/components/design/DesignConfig.vue
@@ -22,6 +22,19 @@
     </n-form-item>
 
     <component  v-if="checkComponent(data.type)" :is="data.type" :select="data"/>
+    <template v-if="hasKey('click') || hasKey('change') || hasKey('input') ">
+      <h4>事件处理</h4>
+      <n-form-item label="change事件" v-if="hasKey('change')">
+        <n-button type="info" dashed @click="editEventCode('change')">编辑代码</n-button>
+      </n-form-item>
+      <n-form-item label="click事件" v-if="hasKey('click')">
+        <n-button type="info" dashed @click="editEventCode('click')">编辑代码</n-button>
+      </n-form-item>
+      <n-alert
+          type="warning"
+          style="margin-bottom: 10px"
+      >注意：此功能在设计状态时无效，可点击预览查看效果</n-alert>
+    </template>
     <template v-if="hasKey('rules')">
       <h4>验证规则</h4>
 
@@ -52,6 +65,42 @@
       </n-form-item>
     </template>
   </n-form>
+  <n-modal
+      v-model:show="showEventCode"
+      :title="editEventHeader"
+      preset="dialog"
+      style="width:800px"
+      positive-text="保存"
+      negative-text="取消"
+      @positive-click="handleSaveEventCode"
+  >
+    <n-alert
+        type="info"
+        style="margin-bottom: 10px"
+    ><n-space>
+      使用示例
+      <n-button text type="primary" @click="setTestEvent('dynamicDisabled')">动态禁用/启用</n-button>
+      <n-button text type="primary" @click="setTestEvent('dynamicSetValue')">动态赋值</n-button>
+      <n-button text type="primary" @click="setTestEvent('dynamicRequired')">必填项修改</n-button>
+      <n-button text type="primary" @click="setTestEvent('dynamicHideLabel')">Label动态显隐</n-button>
+
+      (提示：仅支持Javascript语法)
+      </n-space></n-alert>
+    <div class="code-bord">function {{eventType}}(e,view,form){
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-icon size="18">
+            <SvgIcon iconClass="question" style="margin-right: 10px;" />
+          </n-icon>
+        </template>
+        e：naiveui组件的对应事件入参（如input传入的将是change后的value）<br/>
+        view：视图组件信息（详细信息查看src/components/naiveui/config/naiveui.ts）<br/>
+        form：表单信息
+      </n-tooltip>
+    </div>
+    <CodeEditor v-model:value="eventCode" language="javascript" />
+    <div class="code-dord">}</div>
+  </n-modal>
 </template>
 
 <script lang="ts">
@@ -87,11 +136,14 @@ import { v4 } from 'uuid'
 import {ComponentType,checkComponent} from '../../enums'
 import type {RowData} from '../../types/NaiveWidgetTypes'
 import type { DataTableColumns } from 'naive-ui'
+import CodeEditor from '../../components/CodeEditor.vue'
+
 export default defineComponent({
   name: 'DesignConfig',
   components: {
     Draggable,
     SvgIcon,
+    CodeEditor,
     Input,
     Number,
     Radio,
@@ -167,16 +219,50 @@ export default defineComponent({
         {label:'left',value:'left'},
         {label:'left-end',value:'left-end'},
       ],
+      eventType:null,
+      editEventHeader:'',
+      showEventCode:false,
+      eventCode:``,
     })
     const hasKey = (key: string) =>
       Object.keys(data.value.options).includes(key)
 
+    const setTestEvent = (type) => {
+      let code = ''
+      switch (type) {
+        case 'dynamicDisabled':
+          code='let widget = view.getWidget(\'字段标识\')\nif (widget){\n  widget.options.disabled = !widget.options.disabled\n}'
+          break
+        case 'dynamicHideLabel':
+          code='let widget = view.getWidget(\'字段标识\')\nif (widget){\n  widget.options.showLabel = false\n}'
+          break
+        case 'dynamicSetValue':
+          code=`form['字段标识'] = '新值'`
+          break
+        case 'dynamicRequired':
+          code='let widget = view.getWidget(\'字段标识\')\nif (widget){\n  widget.options.rules.required = true\n }'
+          break
+      }
+      state.eventCode = code
+    }
+    const editEventCode = (eventType) => {
+      state.editEventHeader = eventType+ '事件'
+      state.eventType = eventType
+      state.eventCode =  data.value.options[eventType]
+      state.showEventCode = true
+    }
+    const handleSaveEventCode = () => {
+      data.value.options[state.eventType]=state.eventCode
+    }
     return {
       ...toRefs(state),
       treeDataFormRef,
       data,
       hasKey,
       checkComponent,
+      editEventCode,
+      handleSaveEventCode,
+      setTestEvent,
     }
   }
 })
diff --git a/src/components/naiveui/components/design/DesignForm.vue b/src/components/naiveui/components/design/DesignForm.vue
index 744702d..6df51ac 100644
--- a/src/components/naiveui/components/design/DesignForm.vue
+++ b/src/components/naiveui/components/design/DesignForm.vue
@@ -171,6 +171,7 @@
             </template>
             <template v-else>
               <DesignFormItem
+                :widgetForm="widgetForm"
                 v-if="element.key"
                 :key="element.key"
                 :element="element"
diff --git a/src/components/naiveui/components/design/DesignFormItem.vue b/src/components/naiveui/components/design/DesignFormItem.vue
index 51e10cf..6fea48e 100644
--- a/src/components/naiveui/components/design/DesignFormItem.vue
+++ b/src/components/naiveui/components/design/DesignFormItem.vue
@@ -23,6 +23,7 @@
           :round="element.options.round"
           :show-count="element.options.showCount"
           show-password-on="click"
+          @change="handleChange"
         >
             <template #prefix v-if="element.options.prefix">
               {{element.options.prefix}}
@@ -159,7 +160,7 @@
       </template>
       <template v-if="element.type === 'switch'">
         <n-switch
-          :size="config.size"
+          :size="config.size" @change="handleChange"
           v-model:value="element.options.defaultValue"
           :disabled="element.options.disabled"
         >
@@ -357,9 +358,10 @@ import {defineComponent, PropType, ref} from 'vue'
 import SvgIcon from '../../../../components/SvgIcon.vue'
 import RichTextEditor from '../custom/RichTextEditor.vue'
 import { WidgetForm } from '../../config/naiveui'
-
+import eventMixin from '../../mixins/eventMixin'
 export default defineComponent({
   name: 'NaiveWidgetFormItem',
+  mixins:[eventMixin],
   components: {
     SvgIcon,
     RichTextEditor,
@@ -375,12 +377,20 @@ export default defineComponent({
     },
     selectWidget: {
       type: Object
-    }
+    },
+    widgetForm: {
+      type: Object as PropType<WidgetForm>
+    },
   },
   emits: ['copy', 'delete'],
-  setup() {
+  data(){
+    return{
+    }
+  },
+  setup(props) {
     const handleFilterOption = (input: string, option: { label: string }) =>
       option.label.toLowerCase().includes(input)
+
     return {
       pattern: ref(''),
       handleFilterOption,
diff --git a/src/components/naiveui/components/generate/GenerateForm.vue b/src/components/naiveui/components/generate/GenerateForm.vue
index 3f46d01..1e35853 100644
--- a/src/components/naiveui/components/generate/GenerateForm.vue
+++ b/src/components/naiveui/components/generate/GenerateForm.vue
@@ -67,6 +67,7 @@
         </template>
         <GenerateFormItem
           v-else
+          :widgetForm="widgetForm"
           :model="model"
           :key="element.key"
           :element="widgetForm.list[index]"
diff --git a/src/components/naiveui/components/generate/GenerateFormItem.vue b/src/components/naiveui/components/generate/GenerateFormItem.vue
index 65f68e5..95ef162 100644
--- a/src/components/naiveui/components/generate/GenerateFormItem.vue
+++ b/src/components/naiveui/components/generate/GenerateFormItem.vue
@@ -21,6 +21,7 @@
           :round="element.options.round"
           :show-count="element.options.showCount"
           show-password-on="click"
+          @change="handleChange"
       >
         <template #prefix v-if="element.options.prefix">
           {{element.options.prefix}}
@@ -143,7 +144,7 @@
     <template v-if="element.type === 'switch'">
       <n-switch
           :size="config.size"
-          v-model:value="data"
+          v-model:value="data" @change="handleChange"
           :disabled="disabled || element.options.disabled"
       >
         <template #checked>
@@ -345,14 +346,18 @@ import { computed, defineComponent, PropType,ref } from 'vue'
 import SvgIcon from '../../../../components/SvgIcon.vue'
 import RichTextEditor from '../custom/RichTextEditor.vue'
 import { WidgetForm } from '../../config/naiveui'
-
+import eventMixin from '../../mixins/eventMixin'
 export default defineComponent({
   name: 'GenerateFormItem',
+  mixins:[eventMixin],
   components: {
     SvgIcon,
     RichTextEditor
   },
   props: {
+    widgetForm: {
+      type: Object as PropType<WidgetForm>
+    },
     config: {
       type: Object as PropType<WidgetForm['config']>,
       required: true
diff --git a/src/components/naiveui/config/naiveui.ts b/src/components/naiveui/config/naiveui.ts
index 0d963e0..62bcaf8 100644
--- a/src/components/naiveui/config/naiveui.ts
+++ b/src/components/naiveui/config/naiveui.ts
@@ -21,7 +21,8 @@ export interface WidgetForm {
     labelWidth: any
     showLabel: boolean
     labelPlacement: string
-  }
+  },
+  getWidget:any,
 }
 const rules: Rules = {
   trigger: 'blur',
@@ -62,14 +63,26 @@ export const widgetForm: WidgetForm = {
     labelWidth: 'auto',
     labelPlacement: 'top',
     showLabel: true,
-  }
+  },
+  // getWidget:['list'].map(value => {
+  //   console.log('1111=',value)
+  // }),
+  getWidget:function (modelKey){
+    let widget = null
+    this.list.map(value => {
+      if (value.model===modelKey){
+        widget =  value
+      }
+    })
+    return widget
+  },
 }
-
 export const basicComponents = [
   {
     label: '文本输入',
     type: 'input',
     options: {
+      change:'',
       width: '100%',
       type:'text',
       showLabel: true,
@@ -90,6 +103,7 @@ export const basicComponents = [
     label: '数字输入',
     type: 'number',
     options: {
+      change:'',
       showLabel: true,
       width: '100%',
       defaultValue: 0,
@@ -105,6 +119,8 @@ export const basicComponents = [
     label: '单选框组',
     type: 'radio',
     options: {
+      change:'',
+      click:'',
       defaultValue: '',
       width: '',
       groupType: 'radioGroup',
@@ -139,6 +155,8 @@ export const basicComponents = [
     label: '多选框组',
     type: 'checkbox',
     options: {
+      change:'',
+      click:'',
       defaultValue: [],
       width: '',
       inline: true,
@@ -173,6 +191,7 @@ export const basicComponents = [
     label: '时间选择器',
     type: 'time',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: null,
       width: '',
@@ -189,6 +208,7 @@ export const basicComponents = [
     label: '日期选择器',
     type: 'date',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: null,
       width: '',
@@ -205,6 +225,8 @@ export const basicComponents = [
     label: '评分',
     type: 'rate',
     options: {
+      change:'',
+      click:'',
       showLabel: true,
       defaultValue: null,
       max: 5,
@@ -218,6 +240,7 @@ export const basicComponents = [
     label: '下拉选择框',
     type: 'select',
     options: {
+      change:'',
       defaultValue: [],
       width: '200px',
       placeholder: '请选择',
@@ -255,6 +278,8 @@ export const basicComponents = [
     label: '开关',
     type: 'switch',
     options: {
+      change:'',
+      click:'',
       showLabel: true,
       defaultValue: false,
       disabled: false,
@@ -267,6 +292,7 @@ export const basicComponents = [
     label: '滑块',
     type: 'slider',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: 0,
       width: '',
@@ -285,6 +311,7 @@ export const basicComponents = [
     label: '颜色选择器',
     type: 'color',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: '',
       width: '',
@@ -302,6 +329,7 @@ export const advanceComponents = [
     label: '树形选择',
     type: 'selectTree',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: [],
       width: '',
@@ -410,6 +438,7 @@ export const advanceComponents = [
     label: '穿梭框',
     type: 'transfer',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: '',
       width: '',
@@ -439,6 +468,7 @@ export const advanceComponents = [
     label: '级联选择器',
     type: 'cascader',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: [],
       width: '',
@@ -506,6 +536,7 @@ export const advanceComponents = [
     label: '树形组件',
     type: 'tree',
     options: {
+      change:'',
       showLabel: true,
       defaultValue: [],
       cascade: true,
diff --git a/src/components/naiveui/mixins/eventMixin.js b/src/components/naiveui/mixins/eventMixin.js
new file mode 100644
index 0000000..73eb75e
--- /dev/null
+++ b/src/components/naiveui/mixins/eventMixin.js
@@ -0,0 +1,31 @@
+export default {
+    methods:{
+        /**
+         * 改变事件
+         * @param e 入参
+         */
+        handleChange(e){
+            console.log('触发change事件：',e)
+            let customFn = new Function('form','view','e', this.element.options.change)
+            customFn.call(this,this.model,this.widgetForm, e)
+        },
+        /**
+         * 点击事件
+         * @param e 入参
+         */
+        handleClick(e){
+            console.log('触发click事件：',e)
+        },
+        /**
+         * 带回调的点击事件 - 示例
+         * @param e 入参
+         */
+        /*handleClickCallback(e){
+            let customFn = (rule, value, callback) => {
+              let tmpFunc =  new Function('form','e', this.selectWidget.options.change)
+              return tmpFunc.call(this,this.widgetForm, e)
+            }
+            customFn.call(this,this.widgetForm, e)
+        }*/
+    }
+}
diff --git a/src/components/naiveui/styles/index.less b/src/components/naiveui/styles/index.less
index d2674dc..0cffe2a 100644
--- a/src/components/naiveui/styles/index.less
+++ b/src/components/naiveui/styles/index.less
@@ -419,3 +419,9 @@ body {
     display: block !important;
   }
 }
+.code-bord{
+  color: #7b7979;
+  background: #e8e8e8;
+  font-size: 16px;
+  padding-left: 5px;
+}
-- 
Gitee


From f2e6c7545586c581f89eb8db083528795f9c8f8d Mon Sep 17 00:00:00 2001
From: lvhuaisheng <lvhuaisheng_k@163.com>
Date: Thu, 28 Jul 2022 09:03:30 +0800
Subject: [PATCH 2/2] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E7=9A=84class=EF=BC=8C=E4=BF=AE=E6=94=B9=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E7=BC=96=E8=BE=91=E5=99=A8=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/naiveui/components/CodeEditor.vue          | 2 +-
 src/components/naiveui/components/design/DesignConfig.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/naiveui/components/CodeEditor.vue b/src/components/naiveui/components/CodeEditor.vue
index 9fd1f8c..32ae630 100644
--- a/src/components/naiveui/components/CodeEditor.vue
+++ b/src/components/naiveui/components/CodeEditor.vue
@@ -27,7 +27,7 @@ export default defineComponent({
     },
     theme: {
       type: String,
-      default: 'github'
+      default: 'tomorrow'
     },
     readonly: {
       type: Boolean,
diff --git a/src/components/naiveui/components/design/DesignConfig.vue b/src/components/naiveui/components/design/DesignConfig.vue
index 2c6ad2b..ef892be 100644
--- a/src/components/naiveui/components/design/DesignConfig.vue
+++ b/src/components/naiveui/components/design/DesignConfig.vue
@@ -94,12 +94,12 @@
           </n-icon>
         </template>
         e：naiveui组件的对应事件入参（如input传入的将是change后的value）<br/>
-        view：视图组件信息（详细信息查看src/components/naiveui/config/naiveui.ts）<br/>
+        view：视图组件信息（更多操作查看src/components/naiveui/config/naiveui.ts）<br/>
         form：表单信息
       </n-tooltip>
     </div>
     <CodeEditor v-model:value="eventCode" language="javascript" />
-    <div class="code-dord">}</div>
+    <div class="code-bord">}</div>
   </n-modal>
 </template>
 
-- 
Gitee