框架配置
表格配置屬性說(shuō)明文檔
頁(yè)面添加引用：
import BaseTable from ‘@/components/BaseTable/index.vue
1、grid-edit-width 表格操作欄寬度
例如：grid-edit-width：250
2、gridOtherConfig
| 屬性 | 說(shuō)明 | 示例 |
|---|---|---|
| showCheckbox | 表格屬性列表前的Checkbox | gridOtherConfig:{showCheckbox:true} 所選項(xiàng)值得獲取 this.$refs.tableName.getMulitValue() 類型 (List) |
3、gridConfig表格配置說(shuō)明：
該配置主要控制頁(yè)面表格顯示列。(頁(yè)面需要顯示哪些字段名)
| 屬性 | 說(shuō)明 | 示例 |
|---|---|---|
| label | 列顯示名稱（顯示的列名） | 項(xiàng)目名稱 |
| prop | 對(duì)象Bean屬性名（列名對(duì)應(yīng)的屬性名） | name |
| align | 字段顯示的位置（如字段要顯示要居中顯示還是居左居右）。字典表居中，數(shù)值居右，時(shí)間居中，圖片居中字段比較多的話就居左 | align:'center' |
| isShow | 表示表格字段是否展示(默認(rèn)為true)，false表示不展示 | isShow:'false' |
| width | 表示當(dāng)前字段表格的所占的寬度 | width:10px |
| render | 具體看下面的例子 | |
| type | 如要顯示圖片type：'image'，type:'linkView' 表示的是可點(diǎn)擊預(yù)覽單元格，無(wú)需自行擴(kuò)展點(diǎn)擊事件，type:'linkEdit'表示的是可點(diǎn)擊編輯單元格，無(wú)需自行擴(kuò)展點(diǎn)擊事件，type:'tag'，表示TAG標(biāo)簽單元格，tagType表示TAG顏色 eq 表視判斷屬性，屬性有：success，info，warning，danger等，具體參考ELEMENTUI 的tag屬性，普通點(diǎn)擊事件：type:'link'，事件為，cellClickInfo(prop,data)，prop表示點(diǎn)擊的屬性，data表示行數(shù)據(jù)（在fw-table中 @cellClickInfo=”需要觸發(fā)的事件名”） | type：'image',type:'linkView' |
| tagType | tagType表示TAG顏色，配合type:’tag’，使用 屬性有：success，info，warning，danger等，具體參考ELEMENTUI 的tag屬性 | tagType：'success' |
| link | ||
| fixed | 固定列表欄不滑動(dòng)fixed: 'right', | fixed: 'right' |
| wrap | wrap:'hander'，手動(dòng)控制換行，接受html中 格式;wrap:'auto',自動(dòng)換行 ； 默認(rèn)為不換行，省略號(hào) |
wrap:'hander'，wrap:'auto' |
| eq | tag表示TAG顏色，配合type:'tag'，使用 eqType屬性表示判斷符 tagType屬性有：success，info，warning，danger等，具體參考ELEMENTUI 的tag屬性 type:null,//number表示數(shù)值，null或者string表示字符串；與tagType不同的是eq增加了根據(jù)字段去判斷顯示不同的顏色 | type:’tag’, eq:[{ eqType:’=’, tagType:null, value:'1', type:null,}, { eqType:'=', prop:'state', tagType:'info', value:'2', type:null },] |
注：eq中eqType表示為判斷符號(hào)
render詳解 表格中對(duì)字段 的樣式及點(diǎn)擊事件進(jìn)行自定義操作
gridConfig: [{
label: '當(dāng)事人',
prop: 'conpanyDisplay',
minWidth: '20%',
render: (h, params) => {
return h('el-button', {
props: {
type: 'text'
},
class: {
'custom-table-button': true
},
style: { `對(duì)表格字段樣式進(jìn)行操作`
color: params.row.urgentType == '1' ? '#FFBB00' : '#EA3737'
},
on: { `對(duì)字段觸發(fā)點(diǎn)擊事件`
click: (item) => {
that.viewnew(params.row)
}
}
}, params.row.conpanyDisplay)
}
},
}]
4、queryConfig配置說(shuō)明：
該配置主要控制表格查詢條件顯示（配置查詢按鈕）
| 屬性 | 說(shuō)明 | 示例 |
|---|---|---|
| span | 默認(rèn)24(想要一列顯示兩行就改成12，改成8就是一列顯示三行) | |
| label | 查詢控件顯示說(shuō)明（按鈕顯示名字，如按姓名查詢則按鈕的名字可以是：姓名） | 項(xiàng)目名稱 |
| prop | 對(duì)象Bean屬性名（按鈕顯示名字對(duì)應(yīng)的字段名，如果按姓名查詢就要對(duì)應(yīng)姓名這個(gè)字段） | name |
| type | 控件顯示類型，text:文本框,select下拉框，mul_select多選下拉框,tree下拉樹(shù)， mul_tree多選下拉樹(shù),date 日期，datetime 日期時(shí)間，month:月度，dateRange：，radio單選框,checkbox:復(fù)選框,textarea大文本，editor富文本,headerImage頭像圖片,files多文件上 | type:'select',查詢條件不要使用textarea,editor等無(wú)意義控件 |
| dataScource | 下拉框，下拉樹(shù)等對(duì)應(yīng)字典表配置ID，來(lái)源于代碼生成處的字典表管理（當(dāng)查詢時(shí)需要字典表或者聯(lián)表查詢時(shí)需要這個(gè)屬性,填寫(xiě)的內(nèi)容為字典表關(guān)聯(lián)的Id） | dataScource:'1d5e3da8d5466678470dd91 03aa0436b' |
| data | 下拉框，下拉樹(shù)等默認(rèn)數(shù)據(jù)，一般不用關(guān)注（當(dāng)下拉框數(shù)據(jù)不是從數(shù)據(jù)庫(kù)查詢的，是死的時(shí)候才會(huì)填寫(xiě)內(nèi)容） | |
| url | 下拉框，下拉樹(shù)等來(lái)源URL，屬于自定義屬性，如果dataScource不為空，則不用url（用于復(fù)雜的聯(lián)表查詢，當(dāng)字典表無(wú)法實(shí)現(xiàn)時(shí)我要手寫(xiě)查詢代碼，并且把controller地址填寫(xiě)上） | |
| placeholder | 查詢控制顯示說(shuō)明如果這個(gè)為空就會(huì)選擇label屬性來(lái)顯示控制說(shuō)明 Placeholder：'請(qǐng)輸入名稱' | |
| clearable | 是否顯示下拉框以及時(shí)間選擇框里的小x圖標(biāo)，點(diǎn)擊x可以清空輸入框（如果為false就不顯示） | Clearable：false |
5、formConfig配置說(shuō)明：
該屬性配置主要用于表單顯示（比如增加，修改跳出來(lái)的表單需要顯示的字段）。
| 屬性 | 說(shuō)明 | 示例 |
|---|---|---|
| span lg sm |
該屬性主要用于每個(gè)控件所占列表，一行分為24個(gè)單元格，一行顯示1個(gè)控件配置為24， 一行顯示2個(gè)控件配置為12，以此類推 lg 表示1200=<分辨率<1920采用的列數(shù) sm:表示小于1200分辨率采用的列數(shù) span表示>=1920采用的列數(shù)， 如果沒(méi)有配置lg、sm屬性，則 span是全部分辨率采用的唯一屬性標(biāo)準(zhǔn) | span:8,lg:12,sm:24 |
| label | 表單每個(gè)控件顯示的名字 name:'項(xiàng)目名稱' | |
| prop | 對(duì)應(yīng)的數(shù)據(jù)實(shí)體Bean屬性名稱 | prop:'projectName' |
| type | 控件顯示類型：text:文本框,select下拉框，mul_select多選下拉框,tree下拉樹(shù)， mul_tree多選下拉樹(shù),password密碼框， date 日期，datetime 日期時(shí)間，time 時(shí)間（ HH:mm ）==> {(‘start’: ‘00:00’,’step’: ‘00:01’,’end’: ‘23:45’) 配置time屬性開(kāi)始、間隔和結(jié)束時(shí)間 realtime 時(shí)間( HH: mm :ss )} ，realtimerange 時(shí)間范圍（HH: mm :ss - HH: mm :ss） 在formModl里面給相應(yīng)的屬性賦為null 后端接收為L(zhǎng)ist |
|
| data | 下拉框，下拉樹(shù)等默認(rèn)數(shù)據(jù)，一般不用關(guān)注 | {“id”: “1”,label: “已通過(guò)”} |
| url | 下拉框，下拉樹(shù)等來(lái)源URL，屬于自定義屬性 | |
| disabled | 是否可以填寫(xiě)內(nèi)容（默認(rèn)為false，若改成true則表示這個(gè)輸入框禁止填寫(xiě)） | disabled:true |
| placeholder | 查詢控制顯示說(shuō)明如果這個(gè)為空就會(huì)選擇label屬性來(lái)顯示控制說(shuō)明 | Placeholder：'請(qǐng)輸入名稱' |
| ready | ||
| tree | tree標(biāo)簽配置屬性 | disableBranch:true禁用非葉子節(jié)點(diǎn) customLabeltrue 表示自定義label,選中后默認(rèn)顯示從子向上所有節(jié)點(diǎn)名稱 |
| labelPosition | form表單字段顯示方向默認(rèn)left | 如：labelPosition:'top' |
| disabledDate | 當(dāng)type為date、daterange時(shí)禁止選擇當(dāng)天之前的日期 | 如：disabledDate:1 |
| showType | view一般使用在預(yù)覽 功能為去除輸入框 要把prop屬性改為text | showType:'view' |
| cauBeginValue | 當(dāng)type為daterange時(shí)控制默認(rèn)開(kāi)始時(shí)間 | cauEndValue:-7 |
| cauEndValue | 當(dāng)type為daterange時(shí)控制默認(rèn)結(jié)束時(shí)間 | cauEndValue:-1 |
| colClass | 表單中加下劃線和背景色 | colClass: true |
| itemClass | 表單中標(biāo)題背景色 | itemClass: true |
| fileSize | 表單中當(dāng)type為headerImage單圖片,images多圖片，files多文件上文件上傳時(shí)使用 作用為限制文件上傳大小 單位為M | fileSize: 2 |
| accept | 表單中當(dāng)type為headerImage單圖片,images多圖片，files多文件上文件上傳時(shí)使用 作用：控制上傳文件內(nèi)省,格式為.doc,.docx等 | accept:'.doc,.docx' |
| limit | 表單中當(dāng)type為images多圖片，files多文件上文件上傳時(shí)使用 作用：控制上傳的數(shù)量 | limit:2 |
| tips | 作用：對(duì)應(yīng)字段后展示提示文本 | tips:'圖片推薦尺寸為232x227PX，大小在200KB以內(nèi)' |
| mapType | 作用：選擇地圖類型 | mapType：'gdMag' 調(diào)用高德地圖 一般與type：'openLocation' 配合使用 |
formConfig中Type詳解
| 屬性 | 說(shuō)明 | 示例 |
|---|---|---|
| select | 下拉框 | |
| mul_select | 多選下拉框 | |
| password | 密碼框 | |
| editor(editor2) | 富文本 | |
| text | 文本框 | |
| tree | 下拉樹(shù) | |
| mul_tree | 多選下拉樹(shù) | |
| date | 日期 | HH: mm :ss |
| datetime | 日期時(shí)間 | yyyy-MM-dd HH: mm :ss |
| time | 時(shí)間 | （ HH:mm ）==> {(‘start’: ‘00:00’,’step’: ‘00:01’,’end’: ‘23:45’) 配置time屬性開(kāi)始間隔和結(jié)束時(shí)間 realtime 時(shí)間( HH: mm :ss )} |
| realtimerange | 時(shí)間范圍 | （HH: mm :ss - HH: mm :ss） 在formModl里面給相應(yīng)的屬性賦為null 后端接收為List<String> |
| daterange | 日期范圍 | （yyyy-MM-dd : yyyy-MM-dd） |
| month | 月度 | MM |
| radio | 單選框 | |
| checkbox | 復(fù)選框 | |
| textarea | 大文本 | |
| headerImage | 單圖片 | |
| images | 多圖片 | |
| file | 單文件 | 注意： formModel中要添加對(duì)應(yīng)字段且為String否則出現(xiàn)上傳之后無(wú)法出現(xiàn)上傳按鈕的問(wèn)題 |
| files | 多文件 | |
| openSelect | 根據(jù)查詢選擇獲取數(shù)據(jù) | |
| colorPicker | 選取顏色框 | |
| rate | 設(shè)置類似評(píng)論星數(shù) | |
| switch | 開(kāi)關(guān)按鈕 | |
| slider | 進(jìn)度條拉取 | 例如：控制音量 |
| integer | 整數(shù)數(shù)字輸入框 | |
| decimal | 帶有小數(shù)的輸入框 | |
| openLocation | input后加點(diǎn)擊調(diào)用地圖頁(yè)面并選擇地址圖視化 | 默認(rèn)調(diào)用百度地圖 優(yōu)先使用高德地圖type同級(jí)加mapType: ‘gdMap’, 屬性 |
form更具字段顯示隱藏 內(nèi)根據(jù)（ pId:’sourceUserType’,）字段判斷 值（ showByPValue:[‘1’],）是否顯示
pId:'partyType',
isShow:false,
showByPValue:['1'],`
例如：
{
span: 24,
label: '單位/公民',
prop: 'sourceUserType',
type: 'radio',
rules: [{
required: true,
message: '請(qǐng)輸入單位/公民',
trigger: 'change'
}, ],
data: [{
label: "單位",
id: 1,
},
{
label: "公民",
id: 2,
},
],
},
// citizen_name,citizen_sex,citizen_id,citizen_tel,citizen_site
{
span: 24,
label: '單位名稱',
pId:'sourceUserType',
isShow:false,
showByPValue:['1'],
prop: 'companyId',
type: 'text',
max: 40,
rules: [{
required: true,
message: '請(qǐng)輸入當(dāng)事人單位名稱',
trigger: 'blur'
}, ],
data: []
},
{
span: 24,
label: '聯(lián)系電話',
prop: 'citizenTel',
type: 'text',
max: 18,
rules: [{
required: true,
message: '請(qǐng)輸入聯(lián)系電話',
trigger: 'blur'
}, ],
data: []
},
createQueryEntity方法的使用例子 和詳解
protected QueryEntity createQueryEntity(){
QueryEntity queryEntity=new QueryEntity();
List<String> ids=CollUtil.newArrayList();
List<String> propertys=CollUtil.newArrayList();
List<String> mulFields=CollUtil.newArrayList();
List<String> mulPropertys=CollUtil.newArrayList();
//字典表id對(duì)應(yīng)字段 單選字段
ids.add("839e57d051fb308f2a969afa6f2552af");
propertys.add("hotelName");
ids.add("22fac8cd28f3cb580f4803ae0b2172b1");
propertys.add("scenicName");
//字典表id
queryEntity.setIds(ids);
queryEntity.setPropertys(propertys);
// 多選字段屬性
ids.add("1a6760484add3f2c1fd8c7530fa98cda");
propertys.add("diningName");
mulPropertys.add("diningName");
mulFields.add("diningName");
queryEntity.setMulPropertys(mulPropertys);
queryEntity.setMulFields(mulFields);
// 多文件
queryEntity.setMulPropertysComing(true);
//一般用于查詢文件 查詢文件信息 和單文件圖片查詢 private FileEntity imageFileEntity;
queryEntity.setSingleFilePropertys(CollUtil.newArrayList("image","travelTask"));
//多圖片和多文件接收 接收使用 private List<FileEntity> imageList；
queryEntity.setFilePropertys(CollUtil.newArrayList("image"));
//前端使用tree時(shí)有字典表 使用下面代碼查詢字典表名稱
queryEntity.setTreePropertys(CollUtil.newArrayList(new QueryTreeEntity("fountain", "45a3421d4263a23dc2eb3956bbe50a48")));
}
當(dāng)是多選字端的話 修改和新增時(shí)處理邏輯為
@ApiOperation(value = "新增")
@PostMapping("")
public ResponseData<StandardScheme> addDto(@RequestBody StandardSchemeDto entityDto) {
List<String> mulProperty = CollUtil.newArrayList();
mulProperty.add("schemeTag");
StandardSchemeDto entity = beanVoUtil.changeList2Str(mulProperty,entityDto);
this.service.save(entity);
return ResponseData.success(entity);
}
封裝字典表 和查詢字典表詳解：
@ApiOperation(value = "獲取評(píng)分標(biāo)準(zhǔn)下拉框列表")
@GetMapping("scoringCriteria")
public ResponseData<Map<String, Object>> dicts(Integer index) {
QueryWrapper<ScoringCriteria> queryWrapper = new QueryWrapper<>();
if(StrUtil.isNotBlank(id)) {
queryWrapper.eq("check_type", id);
}
queryWrapper.orderByAsc("create_time");
List<ScoringCriteria> list = this.scoringCriteriaService.list(queryWrapper);
List<SelectNode> dictList = CollUtil.newArrayList();
if (CollUtil.isNotEmpty(list)) {
for (ScoringCriteria scoringCriteria : list) {
SelectNode selectNode = new SelectNode();
selectNode.setId(scoringCriteria.getId());
selectNode.setLabel(scoringCriteria.getScoringCriteria());
dictList.add(selectNode);
}
}
Map<String, Object> map = MapUtil.newHashMap();
map.put("index", index);
map.put("data", dictList);
return ResponseData.success(map);
}
@ApiOperation(value = "獲取綠地名稱")
@GetMapping("landInfo")
public ResponseData<List<BaseDict>> dictLandName(Integer index) {
List<BaseDict> dictList = baseDictService.selectByTableName("t_green_dict_deduction_money");
return ResponseData.success(dictList);
}
枚舉類封裝字典表
@GetMapping("companys")
public ResponseData<Map<String, Object>> companyList(Integer index) {
Map<String, Object> map = MapUtil.newHashMap();
map.put("index", index);
List<SelectNode> nodes = CollUtil.newArrayList();
for (VideoTypeEnums type : VideoTypeEnums.values()) {
nodes.add(new SelectNode(type.getCode(), type.getName()));
}
map.put("data", nodes);
return ResponseData.success(map);
}
openLocation屬性的用法及后端對(duì)經(jīng)緯度的處理
前端
formConfig中的配置
{
span: 12,
label: '地址',
prop: 'address',
type: 'openLocation',
mapConfig: {
provnice: 'provnice',
city: "city",
xian: "",
lnglat: "lnglat",
address: "address"
},
max: 40,
rules: [],
data: []
},
`formViewConfig中的配置-->預(yù)覽大圖`
{
span: 24,
label: '地址',
labelWidth: '1px',
prop: 'address',
type: 'openLocation',
colClass: true,
showType: 'view',
mapConfig: {
lnglat: 'lnglat',
address: 'address'
},
},
后端
/*entity*/
@ApiModelProperty(value = "地址")
private String address;
@ApiModelProperty(value = "經(jīng)緯度")
private String lnglat;
@ApiModelProperty(value = "經(jīng)度")
private String lng;
@ApiModelProperty(value = "緯度")
private String lat;
//小程序中的經(jīng)緯度
@ApiModelProperty(value = "經(jīng)度")
private String gcjLng;
@ApiModelProperty(value = "緯度")
private String gcjLat;
/*service*/
public void changeEntity(BeauResourceDto entityDto, boolean isBaiduLnglat) {
if (StrUtil.isNotBlank(entityDto.getLnglat())) {
List<String> lngLat = StrUtil.split(entityDto.getLnglat(), ',');
if (isBaiduLnglat) {
entityDto.setLng(lngLat.get(0));
entityDto.setLat(lngLat.get(1));
Point point = LocationTransfromUtil.bd09togcj02(Convert.toDouble(entityDto.getLng()),
Convert.toDouble(entityDto.getLat()));
entityDto.setGcjLng(Convert.toStr(point.getLng()));
entityDto.setGcjLat(Convert.toStr(point.getLat()));
} else {
entityDto.setGcjLng(lngLat.get(0));
entityDto.setGcjLat(lngLat.get(1));
Point point = LocationTransfromUtil.gcj02tobd09(Convert.toDouble(entityDto.getGcjLng()),
Convert.toDouble(entityDto.getGcjLat()));
entityDto.setLng(Convert.toStr(point.getLng()));
entityDto.setLat(Convert.toStr(point.getLat()));
}
entityDto.setLnglat(entityDto.getLng() + "," + entityDto.getLat());
}
}
6、gridTopBtnConfig配置說(shuō)明：
該配置表示按鈕緊隨查詢條件顯示的所有按鈕集中配置處，代碼默認(rèn)生成reset,export，自定義按鈕的classify屬性請(qǐng)不要占用該2個(gè)類型
| 屬性 | 說(shuō)明 | 示例 |
|---|---|---|
| name | 按鈕名稱 | 重置 |
| classify | 按鈕類型，自定義按鈕可@對(duì)應(yīng)的classify屬性名部署對(duì)應(yīng)按鈕事件（create：新建。reset:重置。export:導(dǎo)出） | 例如classify:'custom',父窗口通過(guò)@custom='方法名字'即可捕捉 |
| index | 待擴(kuò)展使用 | |
| location | 待擴(kuò)展使用(按鈕存放的位置) | |
| roles | 按鈕權(quán)限，待擴(kuò)展使用 | |
| actionUrl | 按鈕調(diào)用后端地址,reset和export無(wú)需關(guān)注，自定義根據(jù)自己需求使用 | |
| type | 按鈕樣式，自定義按鈕樣式為：primary，可配置項(xiàng)目有:success,info，warning，danger，text | |
| icon | 按鈕圖標(biāo)：默認(rèn)為el-icon-plus | |
| modelId |
7、gridOperaBtnConfig配置說(shuō)明：
該配置表示按鈕另起查詢條件一行顯示的所有按鈕集中配置處，代碼默認(rèn)生成create(新建)，自定義按鈕 的classify屬性請(qǐng)不要占用該類型
| 屬性 | 說(shuō)明 | 示例 |
|---|---|---|
| name | 按鈕名稱 | 重置 |
| classify | 按鈕類型，自定義按鈕可@對(duì)應(yīng)的classify屬性名部署對(duì)應(yīng)按鈕事件（create：新建。reset:重置。export:導(dǎo)出） | 例如classify:'custom',父窗口通過(guò)@custom='方法名字'即可捕捉 |
| index | 待擴(kuò)展使用 | |
| location | 待擴(kuò)展使用 | |
| roles | 按鈕權(quán)限，待擴(kuò)展使用 | |
| actionUrl | 按鈕調(diào)用后端地址,reset和export無(wú)需關(guān)注，自定義根據(jù)自己需求使用 | |
| type | 按鈕樣式，自定義按鈕樣式為：primary，可配置項(xiàng)目有:success,info，warning，danger，text | |
| icon | 按鈕圖標(biāo)：默認(rèn)為el-icon-plus | |
| modelId |
8、gridBtnConfig配置說(shuō)明：
該配置表示每一行表格的操作按鈕，代碼默認(rèn)生成update(修改)，delete(刪除),view(預(yù)覽)，自定義按鈕 的classify屬性請(qǐng)不要占用該類型
| 屬性 | 說(shuō)明 | 示例 |
|---|---|---|
| name | 按鈕名稱 | 重置 |
| classify | 按鈕類型，自定義按鈕可@對(duì)應(yīng)的classify屬性名部署對(duì)應(yīng)按鈕事件（update:修改，delete:刪除，view:預(yù)覽） | 例如classify:'custom',父窗口通過(guò)@custom='方法名字'即可捕捉,父窗口方法參 function 方法名稱(id,row),id表示行主鍵，row表示操作行數(shù)據(jù) |
| index | 待擴(kuò)展使用 | |
| location | 待擴(kuò)展使用 | |
| roles | 按鈕權(quán)限，待擴(kuò)展使用 | |
| actionUrl | 按鈕調(diào)用后端地址,reset和export無(wú)需關(guān)注，自定義根據(jù)自己需求使用 | |
| type | 按鈕樣式，自定義按鈕樣式為：text，可配置項(xiàng)目有:success,info，warning | |
| icon | 按鈕圖標(biāo)：默認(rèn)為el-icon-plus | |
| modelId | ||
| permission | ||
| circle | 待擴(kuò)展使用 |
### `notShow屬性詳解`
gridBtnConfig: [
{
'name': '拒絕',
'type': null,
'classify': 'refusenew',
'index': 2,
'location': 'grid',
'roles': [],
'actionUrl': '',
//動(dòng)態(tài)控制按鈕隱藏或顯示
'extend': {
'notShow': [{
'prop': 'status=2,status=1,status=4,status=5,status=6'
}]
}
},
],
`單條數(shù)據(jù)導(dǎo)出自定義接口`
exportOne(item) {
let url = 'appointOrder/exportOne/' + item.id //要調(diào)用的接口
url += '?Authorization=' + this.$commonApi.getTokenInfo()
url += '&menuId=' + this.GetQueryString('menuId')
url += '&role=' + this.$commonApi.getRole()
url = window.getLocationUrl() + '/' + url
window.open(url)
},
GetQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
var r = window.location.search.substr(1).match(reg)
if (r != null) return unescape(r[2])
return null
},
9、formModel配置說(shuō)明：
formModel表示表單的數(shù)據(jù)屬性，格式如下
formModel: {
'id' : '',
'name': '',
'introduction': '',
'remarks': '',
'projectClassify': '',
}
/*表示有哪些控件，這個(gè)地方需要保持一致*/
10、queryModel配置說(shuō)明：
queryModel表示查詢的數(shù)據(jù)屬性，格式如下=>一般用于默認(rèn)搜索值
queryModel: {
'name' : null,
'projectClassify' : null,
}
11、dialogConfig 配置說(shuō)明：
dialogConfig主要用于控制頁(yè)面整體屬性
| 屬性 | 說(shuō)明 | 示例 |
|---|---|---|
| width | 表示彈窗寬度，默認(rèn)為50%，可自行調(diào)整 | width:80 |
| labelWidth | 表示彈窗的表示文本寬度，默認(rèn)為80px，可自行調(diào)整 | labelWidth:'200' |
| submitName | 表示彈窗的提交按鈕名稱，默認(rèn)為’提交’，可自行調(diào)整 | submitName:'確認(rèn)' |
| submitMessage | 表示彈窗的提交提示信息，默認(rèn)為：'確認(rèn)提交嗎？'',可自行調(diào)整 | |
| showRadio | 表示表格是否顯示單選圓形按鈕（為true表示顯示出按鈕）表示彈窗是否 | showRadio：true |
| showIconSetting | 是否顯示圖標(biāo) | showIconSetting：false |
| isGroup | 分組如果isGroup為true表示彈窗需要分組 | isGroup:true |
| buttons | 表示彈窗的擴(kuò)展按鈕（可以在彈窗里自定義添加按鈕），父窗口可根@submitExtend='自定義方法'捕獲按鈕事件function 自定義方法(url,data){} | url:為后端請(qǐng)求地址type:按鈕類型name:按鈕名稱message:點(diǎn)擊按鈕的提示信息 buttons: [{ ‘className’: ‘cutom-submit-button’, name: ‘短信提醒’,classify: ‘noteIn’,’extend’: {‘notShow’:[{‘prop’:’doResultState=1,doResultState=2,doResultState=5,doResultState=4,doResultState=7’ }]} }, |
| isShowSumbit | 可以在彈窗里不展示提交按鈕 | isShowSumbit：true |
| notFit | 開(kāi)啟表格中列的自定義寬度 | notFit:true |
| tableStripe | 表格中是否有條紋 | tableStripe: false |
| tableBorder | 表格中是否有邊框 | tableStripe: false |
| queryLabelWidth | 自定義搜索字段的寬度 | queryLabelWidth: '60' |
| editType | 彈窗成為頁(yè)面 | editType: 'page' |
| showBack | 當(dāng)editType: ‘page’時(shí) 頁(yè)面有返回按鈕 | showBack: true |
dialogConfig一般生成后默認(rèn)添加此配置
dialogConfig: {
labelWidth: '135px',
tableStripe: false,
tableBorder: false
},
分組的使用
configData: [
{
groupName:"分組標(biāo)題"，
/*自定義分組欄圖標(biāo) 不用可以不加*/
icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
data:[
]
}
]
dialogConfig: {
isGroup: true,
},
彈窗實(shí)現(xiàn)自定義底部butten添加
/*vue*/
<FwBaseDialog
ref="doViewFormDialog"
:form-data="configData.formEventViewModel"
:dialog-config="dialogConfig"
title="查看事件管理"
@noteIn="noteIn"
@sellIn="sellIn">
<div slot="customBody">
<!-- 內(nèi)容 -->
<!-- <div style="display: flex;">
<div style="width: 64%;">
<fw-header title="事件信息" style="margin-top: 11px;" />
<div style="width: 95%;margin-left: 10px;">
<fw-form
:dialog-config="viewFormDialogConfig"
:form-config="configData.formEventViewConfig"
:form-data="configData.formEventViewModel">
</fw-form>
</div>
</div>
</div> -->
</div>
</FwBaseDialog>
/*js*/
dialogConfig: {
labelWidth: '120px',
tableStripe: false,
width: '60%',
tableBorder: false,
buttons: [{
'className': 'cutom-submit-button',
name: '短信提醒',
classify: 'noteIn',
'extend': {
'notShow': [{
'prop': 'doResultState=1,doResultState=2,doResultState=5,doResultState=4,doResultState=7'
}]
}
},
二級(jí)頁(yè)
<fw-card v-if="showMain=='2'">
<div class="el-page-header" style=" padding: 20px 15px;border-bottom:1px solid rgb(227, 227, 227);">
<div class="el-page-header__left" @click="back"><i class="el-icon-back" />
</div>
<div class="el-page-header__content" style="flex: 1;">檔案庫(kù)詳情</div>
</div>
<div style="margin-top: 10px;">
<!--加入自己要寫(xiě)的內(nèi)容 -->
</div>
</fw-card>
---------js-------
通過(guò)showMain屬性控制
back() {
this.showMain = '1'
}
FwFrom里面有個(gè)插槽，formConfig屬性內(nèi)配置的type改為custom,然后插槽的名字就是prop的名字，這個(gè)插槽你們可以自己隨意擴(kuò)展自己的屬性
<FwForm ref="preDeclareInfo" @changeFormModel="changeRepeatFormModel" :dialog-config="configData.dialogConfig" :form-config="configData.formConfig"
:form-data="configData.formNewModel" title="重新提交" >
<div slot="customs">
<div style="display: flex;">
<!--加入自己要寫(xiě)的內(nèi)容 -->
</div>
</div>
</FwForm>
配置文件
configData: [
{
span: 24,
label: '',
labelWidth:"1",
prop: 'customs',
type: 'custom',
}
]
彈窗 框架
<!-- 彈窗1.0 -->
<fw-base-dialog
ref="baseDialog"
:append-to-body="true"
:close-on-click-modal="false"
:visible.sync="discretionAdd"
title="權(quán)力事項(xiàng)庫(kù)信息"
width="75%"
@submit="save">
<div slot="customBody">
<FwForm
ref="authority"
:dialog-config="configData.dialogConfig"
:form-config="configData.formConfig"
:form-data="formModel"
title="權(quán)力事項(xiàng)庫(kù)" />
<div>
<fw-table
ref="causeDiscretion"
:form-data="causeConfigData.formModel"
:form-config="causeConfigData.formConfig"
:dialog-config="causeConfigData.dialogConfig"
:grid-config="causeConfigData.gridConfig"
:grid-data="causeDiscretionGridData"
:query-config="causeConfigData.queryConfig"
:grid-top-btn-config="causeConfigData.gridTopBtnConfig"
@submit="causeDiscretionSubmit"
:query-model="causeConfigData.queryModel"
:grid-opera-btn-config="causeConfigData.gridOperaBtnConfig"/>
</div>
</div>
fw-base-dialog>
<!-- 彈窗2.0 -->
<FwDialogForm
ref="baseDialog"
:config="formConfig"
:form-data="formModel"
:dialog-config="dialogConfig"
:title="菜單配置"
@submit="submitStyle" />
<!-- 打開(kāi)該彈窗 -->
this.$refs.baseDialog.showDialog()
<!-- 關(guān)該彈窗 -->
that.$refs.baseDialog.hideDialog()
<!-- 刷新當(dāng)前表格 -->
that.$refs.baseDialog.getData()
<!-- 彈窗提交按鈕不顯示 -->
`dialogConfig` 屬性加 isShowSumbit:false
<!-- 重置config.js內(nèi)的實(shí)體換原 -->
this.formsyncModel = Object.assign({}, DATA_CONFIG.formsyncModel),
彈窗二
<el-dialog :visible.sync="dialog" width="560px" :append-to-body="true" :close-on-click-modal="false"
:close-on-press-escape="false" class="custom-dialog-class">
<el-form ref="form" :model="updatePassModal" :rules="rules" size="small" label-width="88px">
<el-form-item label="原密碼" prop="password">
<el-input v-model="updatePassModal.password" placeholder="請(qǐng)輸入原密碼" type="password" auto-complete="on"
style="width: 370px;" />
</el-form-item>
<el-form-item label="新密碼" prop="relPassword">
<el-input v-model="updatePassModal.relPassword" placeholder="密碼長(zhǎng)度不能小于8,并且至少包含'大/小寫(xiě)字符,數(shù)字,特殊字符4種組合'"
type="password" auto-complete="on" style="width: 370px;" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" class="custom-button cutom-cancel-button" @click="dialog=false">取消</el-button>
<el-button type="primary" @click="updatePassSubmit" class="custom-button cutom-submit-button">確認(rèn)
</el-button>
</div>
</el-dialog>
data() {
return {
dialog: false,
updatePassModal: {
id: '',
password: '',
relPassword: ''
},
rules: {
password: [{
required: true,
message: '請(qǐng)輸入密碼',
trigger: 'blur'
},
{
min: 8,
max: 16,
message: '長(zhǎng)度在8-16個(gè)字符之間',
trigger: 'blur'
}
],
relPassword: [{
required: true,
message: '請(qǐng)輸入密碼',
trigger: 'blur'
}]
}
}
},
methods: {
deptConfig(item) {
this.dialog = true;
this.updatePassModal.id = item.id
this.updatePassModal.password = ''
this.updatePassModal.relPassword = ''
},
},
//當(dāng)菜單沒(méi)有圖標(biāo)時(shí)UPDATE t_framework_sys_menu SET ICON='index' where icon is null or icon=''
copy實(shí)體類： BeanUtil.copyProperties(beauVillage, vo);
獲取當(dāng)前操作的用戶id： UserIdContext.get()
默認(rèn)用戶名密碼 ： 1dfmSCW980@
單表單保存
<template>
<div>
<div style="display:flex;justify-content: center;">
<div style="width: 80%;">
<fw-card>
<fw-form
ref="opinion"
:dialog-config="configData.dialogConfig"
:form-config="configData.formConfig"
:form-data="configData.formModel"
:inline="true" />
<div style="text-align:center ;margin-top: 40px;">
<slot name="button">
<el-button :loading="loading" type="primary" style="margin-left:60px;width:80px;background-color: #00ada6; border: #00ada6;" @click="save">
{ { loading?'保存中':'保 存' } }
</el-button>
</slot>
</div>
</fw-card>
</div>
</div>
</div>
</template>
<script>
import {
DATA_CONFIG
} from './config/config.js'
import {
beauGeneralizeService
} from '@/api/scenic/beauGeneralize.js'
export default {
name: 'BeauGeneralizeList',
components: {
},
data() {
return {
testData: [],
configData: DATA_CONFIG,
beauGeneralizeService: beauGeneralizeService,
loading: false
}
},
mounted() {
this.getData()
},
methods: {
getData() {
this.beauGeneralizeService.all().then((res) => {
console.log('----', res)
if (res && res.length > 0) {
this.configData.formModel = res[0]
}
})
},
save() {
this.$refs.opinion.validateForm()
const that = this
that.$refs.opinion.submitForm(function(opinionInfoData) {
console.log('----', opinionInfoData)
that.loading = true
if (opinionInfoData.id) {
that.beauGeneralizeService.update(opinionInfoData.id, opinionInfoData).then(res => {
that.$notify.success('提交成功!')
that.loading = false
that.getData()
}).catch(error => {
that.loading = false
})
} else {
that.beauGeneralizeService.create(opinionInfoData).then(res => {
that.$notify.success('提交成功!')
that.loading = false
that.getData()
}).catch(error => {
that.loading = false
})
}
})
}
}
}
</script>
`顯示容器顯示文本行數(shù)，并將超出部分用...代替`
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 要顯示的行數(shù);
-webkit-box-orient: vertical;
`如果文案是英文字符或數(shù)字，可采用white-space 限制`
1. word-break:break-all;只對(duì)英文起作用，以字母作為換行依據(jù)
2. word-wrap:break-word; 只對(duì)英文起作用，以單詞作為換行依據(jù)
3. white-space:pre-wrap; 只對(duì)中文起作用，強(qiáng)制換行
4. white-space:nowrap; 強(qiáng)制不換行，都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行，超出部分隱藏且以省略號(hào)形式出現(xiàn)
`修改或者新增`
submitForm() {
const that = this
that.$refs.preEditDeclareInfo.submitForm(function(preDeclareData) {
if (preDeclareData.id) {
that.preDeclareService.update(preDeclareData.id, preDeclareData).then(res => {
that.dialogEditVisibleup = false
that.$refs.mainTable.queryData()
})
} else {
preDeclareData.diningDataList = that.diningData
preDeclareData.hotelDataList = that.hotelData
console.log('結(jié)果======>', preDeclareData)
that.preDeclareService.create(preDeclareData).then(res => {
that.dialogEditVisible = false
that.$refs.mainTable.queryData()
})
}
})
},
導(dǎo)入功能
/**
*下載模板的接口
*/
@ApiOperation(value = "下載excel模板")
@ApiImplicitParam(name = "id", value = "ID", dataType = "String", paramType = "path", example = "1112", required = true)
@GetMapping("templateurl")
public ResponseData<String> getTemplateUrl() {
String viewPathString = env.getProperty("framework.config.viewpath");
String templateUrl = viewPathString + "excel/peopleTemplate.xls";
return ResponseData.success(templateUrl);
}
服務(wù)器上圖片的引用
<template>
<view>
<cu-custom class="custom-red" :isBack="true" bgColor="common-cu-custom">
<block slot="backText">返回</block>
<block slot="content">景區(qū)導(dǎo)覽</block>
</cu-custom>
<image :src="imageService+'dazhaxie/userWx.jpg'" style="width: 550rpx;" mode="widthFix">
</image>
<view style="height: 1490rpx;" :style="{background:'url('+imageService+'map/maps.jpg)',backgroundSize:'100% 100%',backgroundRepeat:'no-repeat'}">
</view>
</view>
</template>
<script>
import {
IMAGE_SERVICE
} from '@/api/common.js'
export default {
data() {
return {
imageService: IMAGE_SERVICE,
}
},
methods: {
}
}
</script>
/**
*根據(jù)上傳得文件Id查詢文件表的其他屬性
*/
SysFjxxInfo sysFjxxInfo= sysFjxxInfoService.selectById(entityDto.getAudioFile());
列表圖片展示
這里簡(jiǎn)單寫(xiě)個(gè)示例 簡(jiǎn)單實(shí)用后續(xù)自己理解探索
后端
@ApiOperation(value = "分頁(yè)查詢")
@GetMapping("list")
@PreAuthorize("hasPermission(null,'" + SecurityScenicConstants.BEAU_VILL_LIST + "')")
public ResponseData<PageResult<ImageCardEntity>> page(BeauVillageVo entity) {
QueryEntity queryEntity = this.createQueryEntity();
PageResult<BeauVillage> pageResult = super.page(queryWrapper).getData();
PageResult<BeauVillageVo> vos = beanVoUtil.changeBean2Vo(pageResult, BeauVillageVo.class, queryEntity);
PageResult<ImageCardEntity> newPageResult = ImageCardEntity.change(vos,
new ImageCardChangeEntity("id", "updateTime", "activityName", "activityTime", "activityPictureFileEntity"));
return ResponseData.success(newPageResult);
}
private QueryEntity createQueryEntity() {
QueryEntity queryEntity = new QueryEntity();
List<String> ids = CollUtil.newArrayList();
List<String> propertys = CollUtil.newArrayList();
List<String> mulFields = CollUtil.newArrayList();
// 多選字段屬性
List<String> mulPropertys = CollUtil.newArrayList();
ids.add("e68ef2a53df13f5de3b419061009fa7e");
propertys.add("activityType");
queryEntity.setIds(ids);
queryEntity.setPropertys(propertys);
queryEntity.setMulPropertys(mulPropertys);
queryEntity.setSingleFilePropertys(CollUtil.newArrayList("activityPicture"));
queryEntity.setMulFields(mulFields);
return queryEntity;
}
前端
要使用包含 class=”meetingClass” 的dev包裹著分裝好的 <fw-card><fw-image-card></fw-image-card></fw-card>
<style lang="scss" >
.meetingClass{
.bg-purple {
.image{
width: 286px;
height: 175px;
margin-top: 18px;
}
}
}
</style>
vue
<div class="meetingClass">
<fw-card>
<fw-image-card
ref="mainTable"
:api-service="beauVillageService"
:grid-config="configData.gridConfig"
:grid-btn-config="configData.gridBtnConfig"
:form-config="configData.formConfig"
:form-data="configData.formModel"
:grid-edit-width="200"
:form-view-config="configData.formViewConfig"
:grid-top-btn-config="configData.gridTopBtnConfig"
:is-async="true"
:query-config="configData.queryConfig"
:query-model="configData.queryModel"
:grid-opera-btn-config="configData.gridOperaBtnConfig"
:dialog-config="configData.dialogConfig"
form-title="村容村貌"
@view="viewZhip">
<div slot="name"/>
<div slot="address" slot-scope="data">
<div style="display: flex;margin-top: 10px;">
<div style="margin-top: 5px; flex: 1;color: #000000;font-size: 15px;font-weight: bold; margin-left: 15px;text-align: center;">
{ { data.data.name } }
</div>
</div>
<div style="text-align: center; margin-top: 10px;color: #666666;font-size: 15px;padding-bottom: 20px;">
{ { data.data.content } }
</div>
</div>
</fw-image-card>
關(guān)于框架封裝request請(qǐng)求
框架封裝有三種方式
默認(rèn)自動(dòng)生成的引用
import fwUtil from 'framework-util'
const carExtendsService = new fwUtil.ApiService.ApiService('carExtends');
export { carExtendsService }
//一般get傳參要使用params接收值 地址顯示所傳參數(shù)
export function getCarInOutService(query) {
return custemRequest({
url: 'carCheck/carInOutNum/',
method: 'get',
params: query
})
}
//一般put傳參用data接收值 地址不顯示所傳參數(shù)
export function getHouseUsertService(houseId,data) {
return custemRequest({
url: 'peopleInfo/updateHouse/'+houseId,
method: 'put',
data:data
})
}
里面包含增刪改查的方法在vue頁(yè)面引用厚可直接調(diào)用
=====================================================================
import request from '@/utils/request'
export function toAliPay(url, data) {
return request({
url: 'api/' + url,
data,
method: 'post'
})
}
生成文件后要更改的信息 （版本2.0.44-SNAPSHOT）
entity 里面Id用long類型要加注解@TableId(type = IdType.ASSIGN_ID)
例：@TableId(type = IdType.ASSIGN_ID)
private Long id;
后端限制長(zhǎng)度和不能為null
@NotBlank(message = "房屋號(hào)不能為空")
@Size(message = "房屋號(hào)最大長(zhǎng)度不能超過(guò)10", max = 10)
private String houseNum;
新建表的create_time和update_time要調(diào)整為create_data_time和update_date_time字段名稱，而且要用datetime類型
@ApiModelProperty(value = "創(chuàng)建時(shí)間")
@TableField(fill = FieldFill.INSERT)
@JsonFormat(pattern="yyyy-MM-dd hh:mm:ss")
private Date createDateTime;
@ApiModelProperty(value = "創(chuàng)建人")
@TableField(fill = FieldFill.INSERT)
private String createMan;
@ApiModelProperty(value = "修改時(shí)間")
@TableField(fill = FieldFill.INSERT_UPDATE)
@JsonFormat(pattern="yyyy-MM-dd hh:mm:ss")
private Date updateDateTime;
@ApiModelProperty(value = "修改人")
@TableField(fill = FieldFill.INSERT_UPDATE)
private String updateMan;
關(guān)于三級(jí)菜單配置
新建一個(gè)index.vue
<template>
<div >
<router-view />
</div>
</template>
然后到系統(tǒng)管理=>>菜單管理找到對(duì)應(yīng)要顯示三級(jí)菜單的二級(jí)菜單的組件路徑屬性中填寫(xiě)該文件的地址即可如
plugins/platform/thirdMenu/index
changeFormModel
屬性（每次表單輸入填寫(xiě)時(shí)觸發(fā)）
<FwForm
ref="opinion"
:dialog-config="dialogConfig"
:form-config="formConfig"
:form-data="formModel"
title="外呼任務(wù)配置"
@changeFormModel="changeFormModel" />
methods
changeFormModel(prop, fromModel) {
console.log('prop====>', prop)//字段名
console.log('fromModel====>', fromModel)
if (fromModel.startDate != '' && fromModel.endDate != '') {
if (fromModel.startDate > fromModel.endDate) {
fromModel.endDate = ''
}
}
if (fromModel.beginTime != '' && fromModel.overTime != '') {
if (fromModel.beginTime > fromModel.overTime) {
fromModel.overTime = ''
}
}
}
小程序?qū)Χ鄨D片的儲(chǔ)存后端邏輯
生成UUID儲(chǔ)存到當(dāng)前表
String imageIdString = StrUtil.uuid();
entityDto.setPicture(imageIdString);
this.save(entityDto);
//在把多圖片的各個(gè)id和當(dāng)前存的圖片id并對(duì)在一對(duì)多的圖片表中
if (CollUtil.isNotEmpty(entityDto.getPictureImages())) {
for (String image : entityDto.getPictureImages()) {
SysFjxxMul saveSysFjxxMul = new SysFjxxMul();
saveSysFjxxMul.setFjId(image);
saveSysFjxxMul.setRecordId(imageIdString);
saveSysFjxxMul.setMainId(entityDto.getId());
this.sysFjxxMulService.save(saveSysFjxxMul);
}
}
## 接口對(duì)接(采集模塊)
在自定義采集中，添加ICustomAuthImpl接口，如果需要實(shí)現(xiàn)自定義認(rèn)證的接口，實(shí)現(xiàn)該采集接口，并同時(shí)配置方式為
#custom_start#完整對(duì)象名稱#custom_end#即可實(shí)現(xiàn)
自定義數(shù)據(jù)源
在header同級(jí)別處添加配置處，同步添加
customData:"com.framework.dffd",類名為自身應(yīng)用對(duì)的數(shù)據(jù)實(shí)現(xiàn)類的完整類型,如果分頁(yè)，需實(shí)現(xiàn)接口ICustomPageData,默認(rèn)起始頁(yè)為1，如果不分頁(yè)，需實(shí)現(xiàn)接口ICustomData接口即可"http://數(shù)據(jù)來(lái)源
動(dòng)態(tài)數(shù)據(jù)應(yīng)用：{
"header":{
"deviceId":"$deviceId$"
}
}
自定義字典表
直接使用sql查詢?nèi)缓蠓庋b（也可用于統(tǒng)計(jì)）
String sqlEvent = "select count(0) as num from v_country_event_tousu where 1=1";
if (StrUtil.isNotBlank(roleSql)) {
sqlEvent += " and org_no " + roleSql;
}
JdbcTemplate jt = new JdbcTemplate(ds);
Map<String, Object> eventMap = jt.queryForMap(sqlEvent);
通過(guò)表名or通過(guò)實(shí)體邏輯查詢
@GetMapping("yesOrNo")
public ResponseData<Map<String,Object>> getYesOrNoDict(Integer index){
List<BaseDict> baseList = baseDictService.selectByTableName("t_framework_dict_yesno");
List<SelectNode> nodes=CollUtil.newArrayList();
baseList.forEach(self->{
nodes.add(new SelectNode(self.getId(), self.getName()));
});
Map<String,Object> map=MapUtil.newHashMap();
map.put("index", index);
map.put("data", nodes);
return ResponseData.success(map);
}
@GetMapping("alubm")
public ResponseData<Map<String,Object>> getAlbumType(Integer index){
QueryWrapper<PartyTai> queryWrapper=new QueryWrapper<>();
queryWrapper.orderByAsc("px");
List<PartyTai> list= partyTaiService.list(queryWrapper);
List<SelectNode> nodes=CollUtil.newArrayList();
list.forEach(self->{
nodes.add(new SelectNode(self.getId(), self.getName()));
});
Map<String,Object> map=MapUtil.newHashMap();
map.put("index", index);
map.put("data", nodes);
return ResponseData.success(map);
}
VUE中watch的使用（監(jiān)聽(tīng)屬性變化觸發(fā)）
watch: {
// 此處監(jiān)聽(tīng)variable變量，當(dāng)期有變化時(shí)執(zhí)行
orgId(item1, item2) {
// item1為新值，item2為舊值
this.getMenu(this.orgId)
this.getRole(this.orgId)
},
loading(item1, item2) {
// item1為新值，item2為舊值
this.getMenu(this.orgId)
this.getRole(this.orgId)
},
immediate: true // watch偵聽(tīng)操作內(nèi)的函數(shù)會(huì)立刻被執(zhí)行
},
浙公網(wǎng)安備 33010602011771號(hào)