JS增强触发弹窗

JS增强触发弹出的表单可以是 online表单 也可以是 自定义开发的表单。

使用说明

• 支持按钮 ：按钮样式[button]+按钮类型[js] 或者 按钮样式[link]+按钮类型[js]
• js增强弹框方法：this.openCustomModal，方法参数如下表

参数名	类型	描述
title	string	弹框标题，默认 '自定义弹框'
width	int	弹框宽度，默认600
row	object	操作的数据，如果是button按钮，不设置则默认为当前选中行的数据，如果是link按钮，需要传入函数自带参数row
formComponent	string	自定义弹框内表单组件地址，设置的格式和系统菜单组件值的配置一样，如果没有设置，则弹框默认打开的是当前表单
requestUrl	string	表单提交地址，如不设置，则默认表单提交地址为原online编辑地址，formComponent未设置时生效
hide	array	隐藏的表单控件名， formComponent未设置时生效，可以使原表单的某些控件隐藏
show	array	显示的表单控件名， formComponent未设置时生效 ，如果设置，hide参数失效(show与hide互斥)，且只有该数组内的控件才会显示

具体场景

场景一、button按钮触发弹窗online表单

1.添加按钮：按钮样式[button]，按钮类型[js]，按钮编码test1对应增强函数名

2.添加 list页面的js增强

test1(){
  this.openCustomModal({
    title: '测试自定义弹框1',
    width: 800
  });
}

3.效果演示

---

场景二、link按钮触发弹窗online表单，并控制字段显隐

1.添加按钮：按钮样式[link]，按钮类型[js]，按钮编码test2对应增强函数名

2.添加 list页面的js增强

test2(row){
  this.openCustomModal({
    row: row,
    title: '测试自定义弹框2',
    width: 800,
    hide: ['age', 'sex']
  });
}

3.效果演示

link按钮和button的区别在于，link按钮需要手动传入参数:row，button按钮默认不需要传入，但是操作的时候需要先选中数据。

---

场景三、button按钮触发弹窗渲染自定义开发页面

目前自定义开发页面，开源版本暂时不支持。

1.添加按钮：按钮样式[button]，按钮类型[js]，按钮编码test3对应增强函数名

2.添加 list页面的js增强

test3(){
  this.openCustomModal({
    formComponent: 'demo/hello/index.vue',
    title: '测试自定义弹框3',
    width: 800
  });
}

3.效果演示

备注：
上述formComponent用到一个自定义的表单页

文件地址：src/views/demo/hello/index.vue

文件内容：

<template>
    <a-form :labelCol="{span:3}">
        <a-form-item label="名称" >
            <a-input placeholder="请输入名称" v-model:value="name"/>
        </a-form-item>
    </a-form>
</template>

<script>
    
  import { ref, onMounted } from 'vue'
  import { defHttp } from '/@/utils/http/axios'
  import { useMessage } from '/@/hooks/web/useMessage';
  
  export default {
    name: "hello",
    props: {
      // 行数据
      row: {
        type: Object,
        default: () => {
        },
        required: false
      },
      // 该地址是online默认的编辑提交地址 如不满足要求需自定义
      url: {
        type: String,
        default: '',
        required: false
      }
    },
    setup(props, {emit}) {
      const name = ref('')
      const { createMessage } = useMessage();
      
      onMounted(() => {
        name.value = props.row.name
      });

      /**
       * 自定义的表单页面 弹窗确定按钮触发函数名必须写：handleSubmit
       */
      function handleSubmit() {
        let params = Object.assign({}, props.row, { name: name.value });
        defHttp.put({ url: props.url, params }, { isTransformResponse: false }).then((res) => {
          if (res.success) {
            // 提交完毕 关闭弹窗 调用事件：emit('close')
            emit('close')
          } else {
            createMessage.warning(res.message)
          }
        });
      }
      return {
        name,
        handleSubmit
      }
    }
    
  }
</script>