|
|
@@ -0,0 +1,257 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+
|
|
|
+ <!-- 查询 -->
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
|
|
|
+
|
|
|
+ <el-form-item label="ClientId">
|
|
|
+ <el-input v-model="queryParams.clientId" placeholder="请输入ClientId" size="small"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="账号名称">
|
|
|
+ <el-input v-model="queryParams.accountName" placeholder="请输入账号名称"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-select v-model="queryParams.status" clearable size="small">
|
|
|
+ <el-option label="启用" :value="1"/>
|
|
|
+ <el-option label="禁用" :value="0"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <el-row class="mb8">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
|
|
|
+ <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改</el-button>
|
|
|
+ <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table v-loading="loading" :data="accountList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55"/>
|
|
|
+ <el-table-column prop="accountName" label="账号名称"/>
|
|
|
+ <el-table-column prop="id" label="ID"/>
|
|
|
+ <el-table-column prop="clientId" label="ClientId"/>
|
|
|
+ <el-table-column prop="redirectUri" label="回调地址"/>
|
|
|
+
|
|
|
+ <el-table-column label="状态">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag :type="scope.row.status==1?'success':'danger'">
|
|
|
+ {{ scope.row.status==1?'启用':'禁用' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+
|
|
|
+ <el-button size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
|
|
|
+
|
|
|
+ <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
|
|
|
+
|
|
|
+ <el-button size="mini" type="text" @click="toggleStatus(scope.row)">
|
|
|
+ {{scope.row.status==1?'禁用':'启用'}}
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button size="mini" type="text" @click="auth(scope.row.id)">
|
|
|
+ 授权
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页(注意这里 total 用 length) -->
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="500px">
|
|
|
+
|
|
|
+ <el-form ref="form" :model="form">
|
|
|
+
|
|
|
+ <el-form-item label="ClientId">
|
|
|
+ <el-input v-model="form.clientId"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="账号名称">
|
|
|
+ <el-input v-model="form.accountName"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="ClientSecret">
|
|
|
+ <el-input v-model="form.clientSecret"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="回调地址">
|
|
|
+ <el-input v-model="form.redirectUri"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button type="primary" @click="submitForm">确定</el-button>
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ listXsyAccount,
|
|
|
+ addXsyAccount,
|
|
|
+ updateXsyAccount,
|
|
|
+ delXsyAccount,
|
|
|
+ updateXsyAccountStatus,
|
|
|
+ getXsyAuthUrl
|
|
|
+} from "@/api/xsy/xsy";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "XsyAccount",
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ accountList: [],
|
|
|
+ total: 0,
|
|
|
+ ids: [],
|
|
|
+ single: true,
|
|
|
+ multiple: true,
|
|
|
+ showSearch: true,
|
|
|
+
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ clientId: null,
|
|
|
+ status: null
|
|
|
+ },
|
|
|
+
|
|
|
+ form: {},
|
|
|
+ open: false,
|
|
|
+ title: ""
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ /** 查询列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ listXsyAccount(this.queryParams).then(res => {
|
|
|
+ this.accountList = res.rows || [];
|
|
|
+ this.total = res.total || 0;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 搜索 */
|
|
|
+ handleQuery() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 重置 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 选中 */
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.id);
|
|
|
+ this.single = selection.length !== 1;
|
|
|
+ this.multiple = !selection.length;
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 新增 */
|
|
|
+ handleAdd() {
|
|
|
+ this.form = {};
|
|
|
+ this.open = true;
|
|
|
+ this.title = "新增账号";
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 修改 */
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.form = row || {};
|
|
|
+ this.open = true;
|
|
|
+ this.title = "修改账号";
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 提交 */
|
|
|
+ submitForm() {
|
|
|
+ const api = this.form.id ? updateXsyAccount : addXsyAccount;
|
|
|
+
|
|
|
+ api(this.form).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.msgSuccess("操作成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 删除 */
|
|
|
+ handleDelete(row) {
|
|
|
+ const ids = row.id || this.ids;
|
|
|
+
|
|
|
+ this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', "警告")
|
|
|
+ .then(() => {
|
|
|
+ return delXsyAccount(ids);
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.msgSuccess("删除成功");
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 状态切换 */
|
|
|
+ toggleStatus(row) {
|
|
|
+ const status = row.status === 1 ? 0 : 1;
|
|
|
+
|
|
|
+ updateXsyAccountStatus(row.id, status).then(() => {
|
|
|
+ this.msgSuccess("状态修改成功");
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 授权 */
|
|
|
+ auth(id) {
|
|
|
+ const win = window.open('', '_blank');
|
|
|
+
|
|
|
+ getXsyAuthUrl(id).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ win.location.href = res.msg;
|
|
|
+ } else {
|
|
|
+ win.close();
|
|
|
+ this.msgError(res.msg);
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ win.close();
|
|
|
+ this.msgError("授权失败");
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|