JPopup

JPopup 表格弹窗选择组件

一个表格弹窗选择组件，点击输入框后会弹出一个表格弹窗进行选择。

代码演示

一般示例

<template>
  <a-form :form="form">
    <a-form-item label="v-model模式指定一个值返回至当前组件" style="width: 300px">
      <j-popup v-model="selectValue" code="user_msg" org-fields="username,realname" dest-fields="popup,other" field="popup" />
      {{ selectValue }}
    </a-form-item>
    <a-form-item label="v-decorator模式支持回调多个值至当前表单" style="width: 300px">
      <j-popup v-decorator="['one']" :trigger-change="true" code="user_msg" org-fields="username,realname" dest-fields="one,two" @callback="popupCallback" />
      {{ getFormFieldValue('one') }}
    </a-form-item>
    <a-form-item label="v-decorator模式被回调的值" style="width: 300px">
      <a-input v-decorator="['two']"></a-input>
    </a-form-item>
  </a-form>
</template>

<script>
  export default {
    data() {
      return {
        form: this.$form.createForm(this),
        selectValue: ''
      }
    },

    methods: {
      getFormFieldValue(field) {
        return this.form.getFieldValue(field)
      },
      popupCallback(row) {
        this.form.setFieldsValue(row)
      }
    }
  }
</script>

param 参数使用示例

<template>
  <a-card>
    <div>
      <a-form layout="inline" :form="form">
        <a-button @click="toggleTempParam('admin')">admin</a-button>
        <a-button @click="toggleTempParam('jeecg')">jeecg</a-button>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="JPopup示例">
              <j-popup :param="tempParam" v-model="formData" code="report_user" field="name" orgFields="username" destFields="name" :multi="true" />
            </a-form-item>
          </a-col>
          <a-col :span="12">选择的值(v-model)：{{ formData }}</a-col>
        </a-row>
      </a-form>
    </div>
  </a-card>
</template>
<script>
  export default {
    data() {
      return {
        form: this.$form.createForm(this),
        tempParam: { username: "'admin'" },
        formData: ''
      }
    },

    methods: {
      toggleTempParam(key) {
        this.tempParam['username'] = "'" + key + "'"
      }
    }
  }
</script>

api

props

参数	说明	类型	默认值
placeholder	默认文字	string
code	online 报表编码	string
orgFields	online 报表中显示的列，多个以逗号隔开	string
destFields	回调对象的属性，多个以逗号隔开，顺序和 orgFields 一一对应	string
field	v-model 模式专用，表示从 destFields 中选择一个属性的值返回给当前组件	string
triggerChange	v-decorator 模式下需设置成 true	boolean
multi	是否支持多选	boolean	false
param	动态参数对象，在 online 报表参数里手动新增记录，然后就可以在自己页面里传递同名参数，作为数据查询条件，如果是字符串类型需要设置成双引号内套单引号的格式如{name:"'admin'"}。以上用法说明适用于 2.4.6 及其以前版本	object
param	动态参数对象，在 online 报表查询字段中配置是否查询为：勾选状态，然后就可以在自己页面里传递同名参数，作为数据查询条件，如果实际数据是数值需要配置类型为：数值类型。以上用法说明适用于 3.0.0 及其以后版本	object