云服后臺代碼記錄

一、頁面有很多圖表的時候，先定義一個圖表對象HOME_CHART，然后每一個圖表都是這個對象下面的一個屬性
如：
//服務模式分布
HOME_CHART.serviceType = echarts.init(document.getElementById('service-type'));
HOME_CHART.serviceType.setOption({})

// resize 重新計算框架
window.addEventListener('resize',function() {
HOME_CHART.hardwareType.resize();
HOME_CHART.serviceType.resize();
HOME_CHART.newCompany.resize();
});

二、用戶user和角色role的區別
用戶有很多個，角色只有那么幾個，比如超級管理員，系統配置管理員等等
每個用戶只有一個角色，而一個角色可以有很多用戶
createUserId就是當前登錄用戶的userId

二、左邊菜單欄的顯示【資源就是用戶獲取到的權限，即可以看到的菜單】
1.登錄的時候，獲取到用戶的userId，通過接口，findUserByUserId，獲取到用戶的roleId，然后，通過接口findResourceByRoleId，獲取到用戶的菜單權限

四、角色管理
首先，通過接口findRoleListBySysCodeAndPager，獲取到角色的全部信息，展示在頁面的列表中
設置權限：首先通過接口findTreeBySysCode，獲取到全部資源，也就是全部菜單，顯示在樹形結構中
然后通過接口findResourceByRoleId，使用用戶的roleId，顯示用戶已經擁有的權限，即勾選中已經擁有的權限勾選框
再然后，通過giveRolesForResource，更改用戶獲得的資源

五、監聽localstorage
window.addEventListener("storage",function(event){
if(event.newValue!=null){
console.log(event.key);
console.log(event.newValue);
dualMessageBack(event.key,event.newValue);
}
});

六、今天做登錄顯示用戶名的時候，由于先跳轉了頁面，后存本地緩存，導致進去獲取不到用戶名，因為先跳轉頁面了，此時還未進行本地緩存存儲操作，導致獲取不到值

把跳轉頁面放在存值之后即可

if (res.data.code == "success") {
    this._Storage.setObj("userObj", "userObj", res.data.data);
    this.$router.push({
        name: "index"
    });
} 

七、nextTick，頁面加載完成之后調用里面的方法，相當于setTimeout

八、表單校驗的時候，
<el-form
class="dialog-form-style"
:label-position="labelPosition"
label-width="120px"
:rules="rules"
ref="plan"
:model="plan" >
<el-form-item label="手機號" prop="userTelphone">
<el-input v-model.trim="plan.userTelphone"></el-input>
</el-form-item>
</el-form>

prop里面的userTelphone和v-model.trim里面的必須一致，必須都為userTelphone
<el-form-item label="手機號" prop="phone">
<el-input v-model.trim="plan.userTelphone"></el-input>
</el-form-item>
這樣是行不通的

rules:{
userTelphone:[
{ required: true, message: "手機號不能為空", trigger: "blur" },
{
pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
message: "請輸入正確的手機號"
}
]
}

九、

發現在輸入框內，鼠標從左往右滑動，會導致彈框自動關閉
<el-dialog :title="optTitle" :visible.sync="dialogVisible" :close-on-click-modal="clickModal">
加上close-on-click-modal屬性，clickModal為false，注意是要用:號進行綁定

close-on-click-modal 是否可以通過點擊 modal 關閉 Dialog boolean — true

十、遞歸刪除某一條元素

var resourceData = res.data.data;

                    function queryList(json) {
                                for (var i = 0; i < json.length; i++) {
                                    if (json[i].resType == "2") {
                                            json.splice(i,1)
                                            i--;
                                    } else {
                                        queryList(json[i].children);
                                    }
                                }
                                return json
                            }
                    this.list = queryList(resourceData)

最終取到的值是沒有按鈕的數據

js遞歸遍歷數組
js遞歸循環數組

十一、

<el-form-item label="單位名稱:" :label-width="labelWidth">
<el-select placeholder="全部" filterable v-model.trim="formData.unitVal">
<el-option
v-for="(item,index) in units"
:key="index"
:label="item.label"
:value="item.value"

</el-option>
</el-select>
</el-form-item>

不加filterable，在下拉框只能選擇，加了filterable，下拉框既可以選，也可以手動輸入內容進行搜索

十二、vue 多個按鈕，每次只能選擇一個，按鈕上附帶數據

<el-form-item label="發布對象:" :label-width="labelWidth">
                    <el-button v-for="(item,index) in btnArr" :class="{ isActive:isChange == index}" @click="isChoose(index,item)">{{item.name}}</el-button>
                </el-form-item>

data(){
    return {
        btnArr:[
            {name:'App', id:0},
            {name:'web', id:1},
            {name:'大屏', id:2},
        ],
        isChange:-1,
    }
}

isChoose(index,item){
    if(index!=this.isChange){
            this.isChange = index;

    }else{
            this.isChange = -1;
    }
},

十三、vue 可以同時選擇多個按鈕，獲取組合信息
參考：資訊管理

十四、proxy的理解

proxy: {
    '/gsafetyclound': {
      target: ApiConfig.apiHost,
      changeOrigin: true,
      secure: false,
      pathRewrite: {
        '^/gsafetyclound': ''
      }
    },
        '/test': {
      // target: "http://www.gsafetycloud.com/api/v1.1/operation-management", //線上
      target: "http://172.19.12.24:8099/operationManagement/",
      changeOrigin: true,
      secure: false,
      pathRewrite: {
        '^/test': ''
      },
    },
}

一是解決跨域的問題，二是使用代理，可以使用多個服務，根據前綴的不同使用不同的服務

本地開發模式：
不定義$axios.defaults.baseURL，那么默認的baseURL就是代理名稱，比如這里的gsafetyclound，生成的url就是服務器地址【本機就是localhost:8888】+代理名稱+具體的接口名稱，然后這里的代理名稱做了代理【因為是本地開發，所以需要代理做跨域處理】，最終指向的就是target+具體的接口名稱
【注意】：這里的代理，只是一個插件，用于本地開發用的，打包之后這個就消失了
上生產環境就需要定義baseURL了，這個就是生產環境的服務地址，后面直接拼接口地址

生產模式：這里就不存在跨域了，直接拼接口地址
定義baseURL，生成的url就是baseURL+代理名稱+具體的接口名稱，這里需要去掉代理名稱，直接域名+接口地址就行了。

八、調接口，
utils里面的http.js插件，里面有baseURL: "/gsafetyclound",
plugins里面封裝的axios.js組件，封裝好了可以通過this.$axios.$GET來調接口，這里面也配置了baseURL，所以就覆蓋了上面的baseURL

九、本地使用live-server跑nuxt打包后的項目命令：
live-server --port=8080 --proxy='/remoteApi':'http://172.19.12.146:9898'

十、廠家標識是sourceId、用傳編碼是controlHost