JPopup 彈窗選擇組件 === 1.參數配置 | 參數 | 類型 | 必填 |說明| 版本 | |--------------|---------|----|---------| --- | | placeholder |string | | placeholder || | code |string | | online報表編碼 || | orgFields |string | | online報表中顯示的列,多個以逗號隔開 || | destFields |string | | 回調對象的屬性,多個以逗號隔開,其順序和orgFields一一對應 || | field |string | | v-model模式專用,表示從destFields中選擇一個屬性的值返回給當前組件 || | triggerChange |Boolean | | v-decorator模式下需設置成true || | callback(事件) |function | | 回調事件,v-decorator模式下用到,用于設置form控件的值 || |multi |Boolean | | 是否支持多選，默認值false || |param |object | | 動態參數對象，在online報表參數里手動新增記錄，然后就可以在自己頁面里傳遞同名參數，作為數據查詢條件，如果是字符串類型需要設置成**雙引號內套單引號**的格式 如{name:"'admin'"}。以上用法說明適用于2.4.6及其以前版本 |2.4.6- | |param |object | | 動態參數對象，支持傳入和查詢字段、報表參數同名的屬性，如：{name:'admin'}，如果實際數據是數值需要配置類型為：數值類型。以上用法說明適用于3.0.0及其以后版本 ，具體參考下方## param用法詳解 |3.0.0+| | sorter | String | | 默認排序列，使用方法：列名=desc\|asc。例：`age=asc` | `v_3.4.5` | 2.使用示例  ---- ```vue <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> import JPopup from '@/components/jeecgbiz/JPopup' export default { components: {JPopup}, 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> <!-- JPopup示例 --> <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> ~~~ ------------------------------- ## param用法詳解： `version 3.0` #### 場景1：使用現有的參數傳值 報表sql：`select username from sys_user where sex = '${sex}'` 描述：上述sql中，有一個參數sex，那么在實際頁面中使用j-popup組件時可以給其傳值： ~~~ <j-popup :param="popParam" ....../> ... export default { data() { return { popParam:{sex:'1'} } } } ~~~ *注意：這里是sql語句中申明的參數才能通過param傳值* --- #### 場景2：使用現有的結果字段傳值 報表sql：`select username,realname from sys_user` 描述：上述sql中，有兩個查詢字段username,realname,想要在param中使用這兩個字段，必須勾選字段的查詢狀態  ~~~ <j-popup :param="popParam" ....../> ... export default { data() { return { popParam:{username:'admin'} } } } ~~~ *注意：這里是select結果字段+配置了查詢條件 才能通過param傳值* --- #### 場景3：使用自定義參數傳值 報表sql：`select username,realname,sex from sys_user` 描述：上述sql中，沒有顯示的在sql語句中申明參數，然后字段配置時也沒有設置查詢條件，但是頁面使用j-popup組件時需要根據性別(sex)字段篩選數據 配置：手動增加報表參數  頁面代碼如下： ~~~ <j-popup :param="popParam" ....../> ... export default { data() { return { popParam:{sex:'1'} } } } ~~~ *注意： 這里sex必須在select查詢出的字段中，然后手動添加報表參數后才能通過param傳值，即如果sys_user有字段birthday，但是并沒有查詢，則無法使用param傳值。* ---