TEAMModelOS/TEAMModelOS/ClientApp/src/view/settings/OpenMgmt2.vue

<template>
    <div class="open-mgmt">
        <Loading :top="200" bgColor="rgba(103, 103, 103, 0.27)" type="1" v-show="isLoading"></Loading>
        <!-- 列表 -->
        <div class="open-mgmt-left">
            <div class="open-header">
                <span>{{ $t("settings.openList") }}</span>
                <div class="open-action">
                    <!-- <Icon type="md-add" size="18" style="margin-right: 10px" color="rgb(115 115 115)" @click="editOpen(true, true)" /> -->
                    <Icon type="md-add" size="18" style="margin-right: 10px" color="#0094FF" @click="editOpen(true, true)" />
                    
                    <Icon type="md-trash" size="18" color="#0094FF" @click="delOpen" />
                </div>
            </div>
            <vuescroll>
                <div class="open-left-list">
                    <div :class="['open-list', index == nowIndex ? 'list-select': '']"
                        v-for="(item, index) in openList"
                        :key="index"
                        @click="list(index)"
                    >
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </vuescroll>
        </div>
        <!-- 信息 -->
        <div class="open-mgmt-right">
            <div class="open-header">
                <span>{{ $t("settings.openInfo") }}</span>
                <div class="open-action" @click="editOpen(true, false)" v-show="!isEdit">
                    <div>
                        <Icon type="ios-create" size="18" color="#0094FF" />
                        <span>{{ $t("settings.edit") }}</span>
                    </div>
                </div>
                <div class="open-action" v-show="isEdit">
                    <div @click="keepMgmt(true)">
                        <Icon type="md-checkmark-circle" size="18" color="#0094FF" />
                        <span>{{ $t("settings.openKeep") }}</span>
                    </div>
                    <div @click="keepMgmt(false)">
                        <Icon type="md-close-circle" size="18" color="#DDDDDD" />
                        <span>{{ $t("settings.unedit") }}</span>
                    </div>
                </div>
            </div>
            <div class="open-right-info">
                <div class="open-info">
                    <vuescroll>
                        <div class=" dark-iview-form disabled-iview-input">
                            <!-- <div class="open-mgmt-info"> -->
                                <Form :model="openMgInfo" label-position="top">
                                    <div class="open-mgmt-info">
                                        <FormItem :label="$t('settings.openName')">
                                            <Input v-model="openMgInfo.name"
                                                :class="isEdit ? '' : 'open-info-disabled'"
                                                :readonly="isEdit ? false : true"></Input>
                                        </FormItem>
                                        <FormItem :label="$t('settings.token')" class="api-token" v-show="!isEdit">
                                            <div class="api-icon">
                                                <!-- 隐藏 -->
                                                <Icon :type="isTokenShow ? 'md-eye' : 'md-eye-off'" size="18" style="margin-right: 10px" color="rgb(115 115 115)" @click="isTokenShow = !isTokenShow" />
                                                <!-- 刷新 -->
                                                <Icon type="md-refresh" size="18" style="margin-right: 10px" color="rgb(115 115 115)" @click="refresh" />
                                                <!-- 复制 -->
                                                <Icon type="ios-copy" size="18" color="rgb(115 115 115)" @click="copyToken" />
                                            </div>
                                            <Input
                                                v-model="openMgInfo.token"
                                                type="textarea"
                                                :autosize="{ minRows: 10 }"
                                                class="open-info-disabled"
                                                readonly
                                                v-show="isTokenShow"
                                            ></Input>
                                        </FormItem>
                                        <FormItem :label="$t('settings.des')">
                                            <Input v-model="openMgInfo.descr"
                                                type="textarea"
                                                :autosize="{ minRows: 2 }"
                                                :class="isEdit ? '' : 'open-info-disabled'"
                                                :readonly="isEdit ? false : true"></Input>
                                        </FormItem>
                                        <FormItem :label="$t('settings.openStatus')">
                                            <RadioGroup v-model="openMgInfo.status">
                                                <Radio :label="1" :disabled="isEdit ? false : true">{{ $t("settings.enable") }}</Radio>
                                                <Radio :label="0" :disabled="isEdit ? false : true">{{ $t("settings.disable") }}</Radio>
                                            </RadioGroup>
                                        </FormItem>
                                    </div>
                                    <p>{{ $t('settings.webhook') }}</p>
                                    <div class="open-mgmt-info">
                                        <FormItem :label="$t('settings.domainName')">
                                            <Input v-model="openMgInfo.domain"
                                                :class="isEdit ? '' : 'open-info-disabled'"
                                                :readonly="isEdit ? false : true"></Input>
                                        </FormItem>
                                        <FormItem :label="$t('settings.subNews')">
                                            <CheckboxGroup v-model="openMgInfo.news">
                                                <Checkbox label="hhhh" :disabled="isEdit ? false : true">
                                                    <span>订阅通知1</span>
                                                </Checkbox>
                                                <Checkbox label="www" :disabled="isEdit ? false : true">
                                                    <span>订阅通知2</span>
                                                </Checkbox>
                                                <Checkbox label="mmm" :disabled="isEdit ? false : true">
                                                    <span>订阅通知3</span>
                                                </Checkbox>
                                                <Checkbox label="wwwww" :disabled="isEdit ? false : true">
                                                    <span>订阅通知4</span>
                                                </Checkbox>
                                            </CheckboxGroup>
                                        </FormItem>
                                    </div>
                                </Form>
                            </div>
                        <!-- </div> -->
                    </vuescroll>
                </div>
                <div class="open-api dark-iview-table dark-iview-page dark-iview-tabs-card">
                <!-- <div class="open-api"> -->
                    <!-- <vuescroll> -->
                        <!-- <div class="open-api-table">
                            <p>数据写入接口</p>
                            <Table ref="selection"
                                   :loading="isLoadList"
                                   :columns="apiListCol"
                                   :data="isEdit ? apiListSelect : apiListNow"
                                   @on-selection-change="selectionChange"
                            ></Table>
                            <Page :total="pageTotal" :page-size-opts="pageSizeOpts" size="small" show-sizer show-total />
                        </div> -->
                    <!-- </vuescroll> -->
                    <!-- <vuescroll> -->
                        <!-- <div class="open-api-table">
                            <p>数据读取接口</p>
                            <Table ref="selection"
                                   :loading="isLoadList"
                                   :columns="apiListCol"
                                   :data="isEdit ? apiListSelect : apiListNow"
                                   @on-selection-change="selectionChange"
                            ></Table>
                            <Page :total="pageTotal" :page-size-opts="pageSizeOpts" size="small" show-sizer show-total />
                        </div> -->
                    <!-- </vuescroll> -->

                    <Tabs value="1">
                        <TabPane :label="$t('settings.apiType1')" name="1">
                            <div class="open-api-table">
                                <Table ref="selection"
                                       :loading="isLoadList"
                                       :columns="apiListCol"
                                       :data="isEdit ? apiListSelect : apiListNow"
                                       @on-selection-change="selectionChange"
                                >
                                    <template slot-scope="{ row }" slot="name">
                                        <span>{{ row.name }}</span>
                                        <Poptip trigger="hover" :content="row.descr" placement="right">
                                            <!-- <Icon type="ios-alert" /> -->
                                            <Icon type="ios-alert-outline" />
                                        </Poptip>
                                    </template>
                                </Table>
                            </div>
                        </TabPane>
                        <TabPane :label="$t('settings.apiType2')" name="2">
                            <div class="open-api-table">
                                <Table ref="selection"
                                       :loading="isLoadList"
                                       :columns="apiListCol"
                                       :data="isEdit ? apiListSelect : apiListNow"
                                       @on-selection-change="selectionChange"
                                >
                                    <template slot-scope="{ row }" slot="name">
                                        <span>{{ row.name }}</span>
                                        <Poptip trigger="hover" :content="row.descr" placement="right">
                                            <!-- <Icon type="ios-alert" /> -->
                                            <Icon type="ios-alert-outline" />
                                        </Poptip>
                                    </template>
                                </Table>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "OpenMgmt",
    data() {
        return {
            isLoading: false,
            isLoadList: false,
            isTokenShow: false,
            schoolCode: this.$store.state.userInfo.schoolCode,
            openList: [], //开放平台列表
            openMgInfo: {}, //平台信息
            apiType: 1,
            apiListCol: [ //api表头
                /* {
                    type: 'selection',
                    width: 80,
                    align: 'center',
                }, */
                {
                    title: this.$t("settings.apiName"),
                    key: "name",
                    slot: "name"
                },
                {
                    title: this.$t("settings.apiAddress"),
                    key: "url",
                },
                {
                    title: this.$t("settings.apiMethod"),
                    key: "method",
                },
                {
                    title: this.$t("settings.des"),
                    key: "descr",
                },
            ],
            apiList: [], //api原有列表
            apiListSelect: [], //api选择列表
            apiListNow: [], //当前应用已有的api 列表
            pageTotal: 0,
            pageSizeOpts:[5, 10, 20, 30, 40],
            nowIndex: 0, //当前下标
            isEdit: false, //编辑状态
            isAdd: false, // 编辑/新增
        }
    },
    mounted () {
        this.getOpenList()
        this.getApiList()
    },
    methods: {
        // 获取应用列表
        getOpenList() {
            this.isLoading = true
            let list = []
            let req = {code: this.schoolCode}
            this.$api.openMgmt.getOpenList(req).then(
                res => {
                    if (res) {
                        list = [...res.apps]
                        // 没有创建时间，暂时倒序
                        list.reverse()
                        this.openList = list
                        this.openMgInfo = this._.cloneDeep(this.openList[this.nowIndex])
                        this.isLoading = false
                    }
                }, err => {
                    this.$Message.warning(this.$t('settings.openModal1'))
                    setTimeout(() => {
                        this.isLoading = false
                    }, 1000)
            })
        },
        // 获取api 列表
        getApiList() {
            this.apiList = []
            let reqs = {}
            this.$api.openMgmt.getApiList(reqs).then(res => {
                    if (res) {
                        let list = [...res.apis]
                        if(list.length > 0) {
                            // 根据auth 的大小进行排序
                            list.sort((a, b) => {
                                return a.auth - b.auth
                            })
                        }
                        this.apiList = list
                        this.selectApi()
                    }
                }, err => {
                    this.$Message.warning(this.$t('settings.openModal2'))
                    setTimeout(() => {
                        this.isLoadList = false
                    }, 1000)
            })
        },
        // 筛选出该应用已有的api
        selectApi() {
            this.apiListNow = []
            let listSel = this._.cloneDeep(this.apiList)
            if(listSel.length > 0) {
                if(this.openMgInfo.auths.length > 0) {
                    listSel.map(item => {
                        this.openMgInfo.auths.map(items => {
                            if(item.auth == items) {
                                this.apiListNow.push({...item})
                                item._checked = true
                            }
                        })
                    })
                }
            }
            this.apiListSelect = listSel
        },
        // 编辑、新增
        editOpen (isEdit, isAdd) {
            this.isTokenShow = false
            if(this.isEdit) {
                return
            } else {
                this.apiListCol.unshift({
                    type: 'selection',
                    width: 80,
                    align: 'center',
                })
                this.isEdit = isEdit
                this.isAdd = isAdd
                // 新增
                if(isAdd) {
                    var defaultInfo = {
                        auths: [],
                        code: this.schoolCode,
                        descr: null,
                        name: this.$t('settings.opName'),
                        school: this.schoolCode,
                        status: 0,
                    }
                    this.openList.unshift(defaultInfo)
                    this.openMgInfo = defaultInfo
                    this.nowIndex = 0
                    this.apiListSelect = this._.cloneDeep(this.apiList)
                }
            }
        },
        // 删除应用
        delOpen () {
            if(this.isEdit) {
                return
            } else {
                var titWord = this.$t("settings.delModal1") + this.openMgInfo.name + this.$t("settings.delModal2")
                this.$Modal.confirm({
                    title: `${titWord}`,
                    onOk: () => {
                        let req = {
                            id: this.openMgInfo.id,
                            code: this.schoolCode
                        }
                        this.$api.openMgmt.delOpen(req).then(
                            res => {
                                this.openList.splice(this.nowIndex, 1)
                                if(this.openList.length == this.nowIndex) {
                                    this.nowIndex = 0
                                }
                                this.openMgInfo = this._.cloneDeep(this.openList[this.nowIndex])
                                this.selectApi()
                                this.isTokenShow = false
                                this.$Message.success(this.$t('settings.delModal3'))
                            }, err => {
                                this.$Message.error(this.$t('settings.delModal4'))
                                setTimeout(() => {
                                    this.isLoading = false
                                }, 1000)
                            }
                        )
                    },
                    onCancel: () => {
                        this.$Message.info(this.$t('settings.delModal5'));
                    },
                })
            }
        },
        list (index) {
            if(index != this.nowIndex) {
                this.isTokenShow = false
                if(this.isEdit) {
                    if(this.isAdd) {
                        this.openList.splice(0, 1)
                        index = index - 1
                    }
                    this.isEdit = !this.isEdit
                    this.apiListCol.splice(0, 1)
                }
                this.nowIndex = index
                var info = this._.cloneDeep(this.openList[index])
                this.openMgInfo = info
                this.selectApi()
            }
        },
        // 保存平台信息
        keepMgmt (type) {
            // this.isEdit = type
            if(type) {
                let auths = []
                if(this.apiListNow.length > 0) {
                    this.apiListNow.map(item => {
                        auths.push(item.auth)
                    })
                }
                let req = {}
                if(this.isAdd) {
                    req = this.openMgInfo
                    req.auths = auths
                } else{
                    req = {
                        id: this.openMgInfo.id,
                        auths,
                        code: this.schoolCode,
                        descr: this.openMgInfo.descr,
                        name: this.openMgInfo.name,
                        school: this.schoolCode,
                        status: this.openMgInfo.status,
                    }
                }
                this.$api.openMgmt.editOpenInfo(req).then(res => {
                        if (res) {
                            console.log(res.app);
                            this.openMgInfo = res.app
                            this.refreshToken()
                            this.getOpenList()
                            this.selectApi()
                            this.$Message.success(this.$t('settings.keepModal1'));
                        }
                    }, err => {
                        this.$Message.warning(this.$t('settings.keepModal2'))
                        setTimeout(() => {
                            this.isLoading = false
                        }, 1000)
                })
            } else {
                this.openList = this.openList.filter(i => i.id)
                this.openMgInfo = this._.cloneDeep(this.openList[this.nowIndex])
                this.selectApi()
            }
            this.apiListCol.splice(0, 1)
            this.isEdit = false
        },
        // 刷新token
        refresh() {
            if(this.isTokenShow) {
                this.$Modal.confirm({
                    title: this.$t('settings.refreshModal3'),
                    onOk: () => {
                        this.refreshToken()
                    },
                    onCancel: () => {
                        this.$Message.info(this.$t('settings.refreshModal4'));
                    },
                })
            }
        },
        refreshToken() {
            let req = {
                id: this.openMgInfo.id,
                code: this.openMgInfo.school
            }
            this.$api.openMgmt.getToken(req).then(res => {
                    if (res) {
                        this.openList[this.nowIndex].token = res.auth_token
                        this.openMgInfo.token = res.auth_token
                        if(!this.isAdd) {
                            this.$Message.success(this.$t('settings.refreshModal1'));
                        }
                        
                    }
                }, err => {
                    this.$Message.warning(this.$t('settings.refreshModal2'))
                    setTimeout(() => {
                        this.isLoading = false
                    }, 1000)
            })
        },
        copyToken() {
            if(this.isTokenShow) {
                var that = this;
                this.$copyText(this.openMgInfo.token).then(
                    function(e) {
                        that.$Message.success(that.$t('settings.copyModal1'));
                    },
                    function(e) {
                        that.$Message.error(that.$t('settings.copyModal2'));
                    }
                );
            }
        },
        selectionChange(selection) {
            this.apiListNow = selection
            console.log(selection);
        },
        selectMenu(name) {
            console.log(name);
            this.apiType = name
        },
    }
}
</script>

<style lang="less">
    @import "./OpenMgmt2.less";
</style>