1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| <template>
| <div id="addUserApiKey" v-loading="isLoading">
| <el-dialog
| title="添加ApiKey"
| width="40%"
| top="2rem"
| :close-on-click-modal="false"
| :visible.sync="showDialog"
| :destroy-on-close="true"
| @close="close()"
| >
| <div id="shared" style="margin-right: 20px;">
| <el-form ref="formRef" :model="form" :rules="rules" status-icon label-width="80px">
| <el-form-item label="应用名" prop="app">
| <el-input
| v-model="form.app"
| property="app"
| autocomplete="off"/>
| </el-form-item>
| <el-form-item label="启用状态" prop="enable" style="text-align: left">
| <el-switch
| v-model="form.enable"
| property="enable"
| active-text="启用"
| inactive-text="停用"/>
| </el-form-item>
| <el-form-item label="过期时间" prop="expiresAt" style="text-align: left">
| <el-date-picker v-model="form.expiresAt"
| style="width: 100%"
| property="expiresAt"
| type="datetime"
| value-format="yyyy-MM-dd HH:mm:ss"
| format="yyyy-MM-dd HH:mm:ss"
| placeholder="选择过期时间"/>
| </el-form-item>
| <el-form-item label="备注信息" prop="remark">
| <el-input v-model="form.remark"
| type="textarea"
| property="remark"
| autocomplete="off"
| :autosize="{ minRows: 5}"
| maxlength="255"
| show-word-limit/>
| </el-form-item>
| <el-form-item>
| <div style="float: right;">
| <el-button type="primary" @click="onSubmit">保存</el-button>
| <el-button @click="close">取消</el-button>
| </div>
| </el-form-item>
| </el-form>
| </div>
| </el-dialog>
| </div>
| </template>
|
| <script>
|
| export default {
| name: 'addUserApiKey',
| props: {},
| computed: {},
| created() {
| },
| data() {
| return {
| userId: null,
| form: {
| app: null,
| enable: true,
| expiresAt: null,
| remark: null
| },
| rules: {
| app: [{required: true, trigger: 'blur', message: '应用名不能为空'}]
| },
| listChangeCallback: null,
| showDialog: false,
| isLoading: false
| };
| },
| methods: {
| resetForm() {
| this.form = {
| app: null,
| enable: true,
| expiresAt: null,
| remark: null
| }
| },
| openDialog(userId, callback) {
| this.resetForm()
| this.userId = userId
| this.listChangeCallback = callback
| this.showDialog = true
| },
| onSubmit() {
| this.$refs.formRef.validate((valid) => {
| if (valid) {
| this.$axios({
| method: 'post',
| url: '/api/userApiKey/add',
| params: {
| userId: this.userId,
| app: this.form.app,
| enable: this.form.enable,
| expiresAt: this.form.expiresAt,
| remark: this.form.remark,
| }
| }).then((res) => {
| if (res.data.code === 0) {
| this.$message({
| showClose: true,
| message: '添加成功',
| type: 'success'
| });
| this.showDialog = false
| if (this.listChangeCallback) {
| this.listChangeCallback()
| }
| } else {
| this.$message({
| showClose: true,
| message: res.data.msg,
| type: 'error'
| });
| }
| }).catch((error) => {
| console.error(error)
| });
| }
| });
| },
| close() {
| this.showDialog = false
| }
| },
| };
| </script>
|
|
