ry-layer-page

# 七种类型

# Dialog

基本的弹框，在该类型弹框中，可以使用内置的单表单组件和自定义的表单项内容

# 使用示例











































 















 










<script>
export default {
  data() {
    const routeName = this.$route.name.toLowerCase()
    const BASE_URL = '/his/office'
    const form = [
      {
        label: '科室名称',
        model: 'deptName',
        component: 'FormSelect',
        dict: 'sys_normal_disable',
        rules: [
          {
            required: true,
            message: '请输入科室名称',
            trigger: 'change'
          }
        ]
      },
      {
        label: '科室电话',
        model: 'deptPhone',
        component: 'FormInput',
        rules: [
          {
            pattern: /^[1]([3-9])[0-9]{9}$/,
            required: true,
            message: '请输入正确的科室电话',
            trigger: 'blur'
          }
        ]
      }
    ]
    return {
      operateLayer: {
        add: {
          label: '新增',
          params: {},
          method: 'post',
          url: `${BASE_URL}`,
          hasPermi: `${routeName}:add`,
          mode: {
            type: 'Dialog',
            top: '25vh',
            form
          }
        },
        edit: {
          type: 'primary',
          label: '修改',
          params: {
            name: 'Jerry'
          },
          disabled: 'single',
          url: `${BASE_URL}`,
          method: 'put',
          hasPermi: `${routeName}:edit`,
          mode: {
            type: 'Dialog',
            detail: true, // 需要使用详情
            form
          }
        }
      }
    }
  }
}
</script>

在 Dialog 类型弹框中，根据项目需求，我们对弹框进行简单的配置，但是弹框里面的各种表单项该怎么写呢，上面form中写了一部分示例；如何使用form中的表单项，我们支持了一些常用的内置单表单组件，也可以自定义组件，详细可以查看单表单组件章节。

# 属性

属性 说明 类型 可选值 默认值
type 点击按钮后，需要触发的操作类型 string 见 mode 的七种类型 —
form 移步阅读 单表单组件章节 array — —
button 自定义弹框中按钮的文字以及显隐，不加此项，默认按钮为'取消'，'确定' array — —
detail 默认传递表格 row 信息；当 type 为 RouterPage 并且 detail 为 true 时，则路由模式中的 query 接受详情信息，但是过大的详情信息不建议走路由传参！ boolean — false
rules 详见 element 的 rules 规则 array — —
readonly 用于查看功能等，弹框中的信息是否为纯文本展示 boolean — false
title Dialog 的标题；为空时取按钮的文本（label 字段） string — —
width Dialog 的宽度 string — 50%
fullscreen 是否为全屏 Dialog boolean — false
top Dialog CSS 中的 margin-top 值 string — 15vh
modal 是否需要遮罩层 boolean — true
modalAppendToBody 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上 boolean — true
appendToBody Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true boolean — false
lockScroll 是否在 Dialog 出现时将 body 滚动锁定 boolean — true
customClass Dialog 的自定义类名 string — —
closeOnClickModal 是否可以通过点击 modal 关闭 Dialog boolean — true
closeOnPressEscape 是否可以通过按下 ESC 关闭 Dialog boolean — true
showClose 是否显示关闭按钮 boolean — true
beforeClose 关闭前的回调，会暂停 Dialog 的关闭 function(done)，done 用于关闭 Dialog — —
center 是否对头部和底部采用居中布局 boolean — false
destroyOnClose 关闭时销毁 Dialog 中的元素 boolean — false

# 确认弹框

确认弹框的类型为（warning、info、success、error），用于项目中需要删除、警告等需要进行第二次确认的操作

# 使用示例

















 












 





















<script>
export default {
  data() {
    const routeName = this.$route.name.toLowerCase()
    const BASE_URL = '/his/office'
    return {
      operateLayer: {
        remove: {
          type: 'primary',
          label: '删除',
          disabled: 'multipe',
          url: `${BASE_URL}`,
          method: 'delete',
          hasPermi: `${routeName}:remove`,
          mode: {
            subscribe: '是否确认删除这些数据?',
            type: 'warning',
            title: '提示',
            label: 'deptId' // path接口传参为：http://xxxx/deptId
          }
        },
        warn: {
          type: 'danger',
          disabled: 'single',
          label: '警告',
          url: `${BASE_URL}/warn`,
          method: 'get',
          hasPermi: `${routeName}:warn`,
          mode: {
            type: 'error',
            subscribe: item => {
              return `${item.deptLeader}已被严重警告`
            },
            title: '警告',
            requestParams: true, // params传参：{ids：deptId}
            label: 'deptId',
            paramsLabel: 'ids',
            catch: () => {
              this.$message({
                type: 'info',
                message: '已取消警告'
              })
            }
          }
        }
      }
    }
  }
}
</script>

# 多个参数/复杂参数

当需要传递多个参数时，选用 multiParams，可选参数有：

  • field 为字段名
  • label 为选择行数据中的取值字段
  • hidden 当组件复用时，可判断是否需要传递该参数
  • type 为可选 array 数组类型传参，会把表格中选中行数的目标字段全部加到 filed 中






















 
 
 
 



submit: {
  size: "mini",
  type: "primary",
  label: "下发",
  disabled: "multipe",
  params: {},
  disabled: (val) => {
    return val[0].status !== "0";
  },
  method: "post",
  url: `${BASE_URL}/distributeSdzg`,
  mode: {
    subscribe: "提交后，下发数据立即生效，确认无误后可点击确定。",
    type: "warning",
    title: "提示",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showConfirmButton: true,
    showCancelButton: true,
    center: false,
    roundButton: false,
    requestParams: true, // 是params传参
    multiParams: [
      { field: "id", label: "id", type:'array'}, // 选择多行，多行的id添加到id字段中了
      { field: "type", label: "type"},
    ]
  }
},

# 属性

属性 说明 类型 可选值 默认值
type 点击按钮后，需要触发的操作类型 string 见 mode 的七种类型 —
subscribe MessageBox 消息正文内容 string / function(info) — —
title MessageBox 标题 string — 提示
showCancelButton 是否显示取消按钮 boolean — false（以 confirm 和 prompt 方式调用时为 true）
showConfirmButton 是否显示确定按钮 boolean — true
cancelButtonText 取消按钮的文本内容 string — 取消
confirmButtonText 确定按钮的文本内容 string — 确定
center 是否居中布局 boolean — false
roundButton 是否使用圆角按钮 boolean — false
catch 取消按钮后的回调 function — —
label 选择行取值的别名字段 string — id
paramsLabel 参数字段的别名 string — id
requestParams 改为 params 传参，不传则为 path 路径传参,可搭配 label 一起使用 boolean true —
multiParams 多个参数判断或单个参数复杂判断 array — id

# CustomDialog

# 使用示例

此时引入了一个外部自定义组件到当前组件。在外部自定义组件中，不受当前插件的限制，可以随意的写项目中比较复杂的弹框需求。












 











<script>
import CustomDialog from './CustomDialog'
export default {
  data() {
    return {
      operateLayer: {
        CustomDialog: {
          label: '自定义弹框',
          params: { name: 'resrse' },
          show: 'table',
          mode: {
            type: 'CustomDialog',
            name: 'customDialog',
            detail: true,
            component: CustomDialog
          }
        }
      }
    }
  }
}
</script>

# 属性

属性 说明 类型 可选值 默认值
type 点击按钮后，需要触发的操作类型 string 见 mode 的七种类型 —
name 自定义弹框时，name 必传;自定义组件都要有 name 作为该组件的 ref 值 string — —
detail 为 true 时，自定义组件的详情会传到该组件的 props 的 params 中 boolean — false
component 自定义组件本身 object — —

# 自定义弹框组件的使用

参数dialogVisible控制显隐必传；queryList点击确定后，执行该方法可以用于刷新展示层数据；params为选择当前行的信息，在当前组件中可以使用该行信息进行一系列操作。

<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    @close="() => $emit('update:dialogVisible', false)"
  >
    <h1>自定义弹框</h1>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:dialogVisible', false)">取 消</el-button>
      <el-button type="primary" @click="$emit('update:dialogVisible', false)">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    queryList: {
      type: Function
    },
    params: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

# CustomPage

# 使用示例

例如：新增功能比较复杂时，只依靠弹框是放不下的，新增的事项很庞大，这时就需要一个单独的页面去完成该操作，此时就可以使用自定义组件CustomPage来完成这件事，其他搜索层、操作层和展示层还是在当前组件，只是把比较复杂的新增功能给抽离出去单独完成。














 











<script>
import CustomPage from './CustomPage'
export default {
  data() {
    return {
      operateLayer: {
        customPage: {
          type: 'success',
          disabled: 'single',
          show: 'table',
          icon: 'el-icon-set-up',
          label: '自定义组件',
          mode: {
            type: 'CustomPage',
            name: 'customPage',
            component: CustomPage,
            detail: true
          }
        }
      }
    }
  }
}
</script>

# 属性

属性 说明 类型 可选值 默认值
type 点击按钮后，需要触发的操作类型 string 见 mode 的七种类型 —
name 自定义弹框时，name 必传;自定义组件都要有 name 作为该组件的 ref 值 string — —
detail 为 true 时，自定义组件的详情会传到该组件的 props 的 params 中 boolean — false
component 自定义组件本身 object — —

# 自定义组件页面的使用

当我们点击新增按钮后，进入到了这个自定义组件页面，完成了一系列功能后，需要再跳回到主页面，此时需用到this.$emit("update:pageVisible", false),即关闭当前组件页面，回到主页面。

参数pageVisible控制显隐必传；queryList点击确定后，执行该方法可以用于刷新展示层数据；params为选择当前行的信息，在当前组件中可以使用该行信息进行一系列操作。

<template>
  <div>
    <h1>自定义组件页面</h1>
    {{ params }}
    <el-button @click="submit">提交</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    pageVisible: {
      type: Boolean,
      required: true
    },
    queryList: {
      type: Function
    },
    params: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {},
  methods: {
    submit() {
      // 回到首页
      this.$emit('update:pageVisible', false)
      // or
      //this.$parent.pageVisible=false;

      // 回到首页,重新查询数据
      this.queryList()
      // or
      //this.$parent.queryList();
    }
  }
}
</script>

# RouterPage

自定义路由页面和自定义组件页面很相似，只是跳转的方式不同，前者是通过组件控制，后者通过路由控制（改变了路由）；在各自的自定义组件中获取选择行的信息方式不同，前者是通过组件的传参获取，后者是通过this.$route路由信息获取。

# 使用示例

如果defatil为true时，跳转过程中，会把选择行的详情带入到this.$route.query.params中；可选择path或name方式切换路由页；











 



















<script>
export default {
  data() {
    return {
      operateLayer: {
        routerPage: {
          disabled: 'single',
          show: 'table',
          label: '自定义路由',
          mode: {
            type: 'RouterPage',
            detail: true,
            router: {
              path: '/his/RouterPage',
              query: {
                name: '参数'
              }
              // name: "RouterPage",
              // params: {
              //   sek: "lakei",
              // },
            }
          }
        }
      }
    }
  }
}
</script>

# 属性

属性 说明 类型 可选值 默认值
type 点击按钮后，需要触发的操作类型 string 见 mode 的七种类型 —
name 自定义弹框时，name 必传;自定义组件都要有 name 作为该组件的 ref 值 string — —
detail 默认传递表格 row 信息；当 type 为 RouterPage 并且 detail 为 true 时，通过 sessionStorage 进行获取详情数据,值为 ry-detail string — false
detailId 传递 detailId：则获取 row 里面的对应的 id 传过去，可根据该 id 获取详情 boolean — id
router 路由跳转的一些配置 object — —

# 自定义路由页面的使用

如何获取改行的信息数据？

  • 如果detail为 true，从sessionStorage.getItem("ry-detail") 获取接口详情！
  • 如果detail为 false,detailId为 true，直接从 query 路由传递当前行的自定义 id！
  • 如果detail为 false,detailId为 false，从sessionStorage.getItem("ry-detail") 获取当前行的基本信息，不调接口！
<template>
  <div>
    <h1>路由自定义页面</h1>
    <el-button @click="submit">提交</el-button>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(JSON.parse(this.$route.query)) //当前选中行的详情信息
    console.log(JSON.parse(sessionStorage.getItem('ry-detail'))) //当前选中行的详情信息
  },
  methods: {
    submit() {
      this.$router.go(-1)
    }
  }
}
</script>

如何获取其它 row 的数据？

  • 以row_开头，后面紧跟着改行的字段名称，也就是 status，经过转换，会把 row.status 的值通过路由的参数 row_status 传递过去

















 





search: {
  size: 'mini',
  type: 'primary',
  label: '查看',
  params: {},
  show: 'table', //展示到表格操作列中
  type: 'text',
  method: 'get',
  url: `${BASE_URL}/getXshcDetail`,
  mode: {
    type: 'RouterPage',
    detail: true,
    router: {
      path: '/xscx/search/index/',
      query: {
        mode: 'search',
        type: 'xscx',
        row_status: '',
      },
    },
  },
},

# Export

# 使用示例

当使用导出功能时，会出现两种情况：

  • 不传参数，则全部导出
  • 传递参数，也就是选择的表格行数据

传递参数有两种方式，就是把选择的 selection 数据以数组或字符串拼接传递过去，根据 paramsType 判断，默认为 string，如果是行内操作（table=show），则不能传递数组！














 












<script>
export default {
  data() {
    return {
      operateLayer: {
        export: {
          size: 'mini',
          type: 'primary',
          label: '导出',
          params: { type: khlrType }, // 支持带入自定义的参数，此参数会合并到接口参数中
          method: 'post',
          url: `${BASE_URL}/export`,
          mode: {
            type: 'Export',
            label: 'id', // 当选择表格数据时，默认取表格列表的id属性
            paramsType: 'array', // 默认是 string
            paramsLabel: 'exportIds', // 此时接口需要传exportIds这个字段，而不去是id字段
            exportName: `${types[khlrType].label}.xlsx` // 录入时，根据不同考核单位
          }
        }
      }
    }
  }
}
</script>

# 复杂参数/多个参数 multiParams

当需要传递多个参数时，选用 multiParams，可选参数有：

  • field 为字段名
  • label 为选择行数据中的取值字段
  • hidden 当组件复用时，可判断是否需要传递该参数

把多个字段以 string拼接 方式传递过去，

export: {
  size: "mini",
  type: "primary",
  label: "生成考核表",
  params: {},
  method: "post",
  disabled: "single",
  url: `${BASE_URL}/generateAssessmentForm`,
  mode: {
    type: "export",
    multiParams: [
      {
        field: "deptId",
        label: "deptId",
        hidden: kpType === "lzkp"
      },
      { field: "khjdYear", label: "khjdYear" },
      { field: "khjdType", label: "khjdType" }
    ],
    exportName: "考核表.zip"
  }
},

把多个字段以 array 方式传递过去，

export: {
  size: "mini",
  type: "primary",
  label: "导出",
  params: { type: khlrType },
  method: "post",
  url: `${BASE_URL}/export`,
  mode: {
    type: "export",
    paramsType: 'array', // 默认是 string
    multiParams: [
      {
        field: "exportIds",
        label: "id",
      },
      { field: "khjdYear", label: "khjdYear" },
    ],
    exportName: `${types[khlrType].label}.xlsx`
  }
}

# 属性

属性 说明 类型 可选值 默认值
type 点击按钮后，需要触发的操作类型 string 见 mode 的七种类型 —
label 选择行取值的别名字段 string — id
paramsLabel 参数字段的别名 string — id
multiParams 多个参数判断或单个参数复杂判断 array — id
exportName 导出附件的名称；支持回调函数，参数为选择当前行的信息 string/function(row) — 列表文件.xlsx
paramsType 判断传入的是数组还是字符串 string/ string/array string

# CustomOperate

偏向于自定义操作项的功能，通过该类型在当前页面操作任何事情；click 属性接受一个回调函数，并且返回两个参数，参数一为查询条件对象，参数二为选中表格的数据

# 使用场景

  1. 用于下载本地文件场景
  2. 打开一个自定义的弹框

# 使用示例

该类型使用起来简单方便，直接使用 click 的回调函数即可！

 download: {
   size: 'mini',
   type: 'primary',
   label: '初步核查报告模板',
   mode: {
     type: 'CustomOperate',
     click: this.downloadFile,
   },
 },

methods: {
  /** 下载文件 */
  downloadFile(queryParams,sections) {
    // 在这里面可以加一些其他操作，比如确认弹框等...
    window.open('/file/初步核查报告模板.docx');
  },
},

← 其它用法 →