邃芒慧影管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

305 lines
7.2 KiB

  1. <template>
  2. <div class="page flex justify-around">
  3. <div class="card">
  4. <div class="title">密钥详情</div>
  5. <div class="key">
  6. <span class="text">{{ $t("keyMangage.name") }}:{{ name }}</span>
  7. </div>
  8. <!-- appId -->
  9. <div class="key">
  10. <span class="text">appId:{{ showCode }}</span>
  11. <span class="showOrHide" @click="showHideCode">{{ showText }}</span>
  12. <span v-if="showText == '隐藏'" class="copy" @click="copyKey(showCode)"
  13. >复制</span
  14. >
  15. </div>
  16. <!-- appKey -->
  17. <div class="key">
  18. <span class="text">appKey:{{ showCodeII }}</span>
  19. <span class="showOrHide" @click="showHideCodeII">{{ showTextII }}</span>
  20. <span
  21. v-if="showTextII == '隐藏'"
  22. class="copy"
  23. @click="copyKey(showCodeII)"
  24. >复制</span
  25. >
  26. </div>
  27. <!-- signKey -->
  28. <div class="key">
  29. <span class="text">signKey:{{ showCodeIII }}</span>
  30. <span class="showOrHide" @click="showHideCodeIII(showCodeIII)">{{
  31. showTextIII
  32. }}</span>
  33. <span v-if="showTextIII == '隐藏'" class="copy" @click="copyKey"
  34. >复制</span
  35. >
  36. </div>
  37. <div class="keyStatus">
  38. <span class="text"
  39. >密钥状态:
  40. <span v-if="!keyStatus" style="color: #36db43">正常</span>
  41. <span v-else style="color: #ff0000">失效</span>
  42. </span>
  43. <span v-if="keyStatus" class="fail" @click="changeStatus(0)">恢复</span>
  44. <span v-if="!keyStatus" class="success" @click="changeStatus(1)"
  45. >作废</span
  46. >
  47. </div>
  48. </div>
  49. </div>
  50. </template>
  51. <!-- videoType==1为竖,==2为横 -->
  52. <script setup>
  53. //#region 导入
  54. import { linkEmits } from "element-plus";
  55. import { getCurrentInstance } from "vue";
  56. import { useI18n } from "vue-i18n";
  57. import { useRoute, useRouter } from "vue-router";
  58. import { getKeyByIdApi, updateKeyStatusApi } from "@/api_mangage/key";
  59. const route = useRoute();
  60. const router = useRouter();
  61. const { locale } = useI18n();
  62. const lanChange = ref(locale);
  63. const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录
  64. const keyId = ref("");
  65. const name = ref("");
  66. const appId = ref("");
  67. const hideCode = ref("");
  68. const showCode = ref("");
  69. const showText = ref("查看");
  70. const detailId = ref("");
  71. const showHideCode = () => {
  72. if (showText.value == "查看") {
  73. showText.value = "隐藏";
  74. showCode.value = appId.value;
  75. } else {
  76. showText.value = "查看";
  77. showCode.value = hideCode.value;
  78. }
  79. };
  80. const appKey = ref("");
  81. const hideCodeII = ref("");
  82. const showCodeII = ref("");
  83. const showTextII = ref("查看");
  84. const showHideCodeII = () => {
  85. if (showTextII.value == "查看") {
  86. showTextII.value = "隐藏";
  87. showCodeII.value = appKey.value;
  88. } else {
  89. showTextII.value = "查看";
  90. showCodeII.value = hideCodeII.value;
  91. }
  92. };
  93. const signKey = ref("");
  94. const hideCodeIII = ref("");
  95. const showCodeIII = ref("");
  96. const showTextIII = ref("查看");
  97. const showHideCodeIII = () => {
  98. if (showTextIII.value == "查看") {
  99. showTextIII.value = "隐藏";
  100. showCodeIII.value = signKey.value;
  101. } else {
  102. showTextIII.value = "查看";
  103. showCodeIII.value = hideCodeIII.value;
  104. }
  105. };
  106. const getKeyFunc = async () => {
  107. const id = keyId.value;
  108. try {
  109. const res = await getKeyByIdApi(id);
  110. console.log(res, "res");
  111. detailId.value = res.data.id
  112. appId.value = res.data.appId;
  113. appKey.value = res.data.appKey;
  114. signKey.value = res.data.signKey;
  115. keyStatus.value = res.data.status;
  116. name.value = res.data.name;
  117. const len = appId.value.length;
  118. const lenII = appKey.value.length;
  119. const lenIII = signKey.value.length;
  120. let code = "";
  121. let codeII = "";
  122. let codeIII = "";
  123. for (let index = 0; index < len; index++) {
  124. code += "*";
  125. }
  126. for (let index = 0; index < lenII; index++) {
  127. codeII += "*";
  128. }
  129. for (let index = 0; index < lenIII; index++) {
  130. codeIII += "*";
  131. }
  132. hideCode.value = code;
  133. showCode.value = code;
  134. hideCodeII.value = codeII;
  135. showCodeII.value = codeII;
  136. hideCodeIII.value = codeIII;
  137. showCodeIII.value = codeIII;
  138. } catch (error) {
  139. console.log(error, "err");
  140. }
  141. };
  142. const copyKey = (text) => {
  143. navigator.clipboard
  144. .writeText(text)
  145. .then(() => {
  146. ElMessage.success("复制成功!");
  147. })
  148. .catch(() => {
  149. ElMessage.error("复制失败!");
  150. });
  151. };
  152. const keyStatus = ref("");
  153. const changeStatus = async (status) => {
  154. const id = detailId.value;
  155. if (status) {
  156. ElMessageBox.confirm("此操作将作废密钥,确定?", "Warning", {
  157. confirmButtonText: "确定",
  158. cancelButtonText: "取消",
  159. type: "warning",
  160. })
  161. .then(async () => {
  162. try {
  163. const res = await updateKeyStatusApi(id, status);
  164. if (res.code == 200) {
  165. ElMessage({
  166. type: "success",
  167. message: "作废成功!",
  168. });
  169. getKeyFunc();
  170. }
  171. } catch (error) {
  172. console.log(error, "err");
  173. }
  174. })
  175. .catch(() => {});
  176. } else {
  177. try {
  178. const res = await updateKeyStatusApi(id, status);
  179. if (res.code == 200) {
  180. ElMessage({
  181. type: "success",
  182. message: "恢复成功!",
  183. });
  184. getKeyFunc();
  185. }
  186. } catch (error) {
  187. console.log(error, "err");
  188. }
  189. }
  190. };
  191. onMounted(() => {
  192. keyId.value = route.query.id;
  193. getKeyFunc();
  194. });
  195. </script>
  196. <style lang="scss" scoped>
  197. .page {
  198. height: calc(100vh - 80px);
  199. // height: calc(100vh - 80px);
  200. background-color: #ffffff;
  201. border-radius: 30px 0 0 0;
  202. overflow: hidden;
  203. .card {
  204. width: 80%;
  205. height: 70%;
  206. background-color: #fafafa;
  207. margin-top: 10vh;
  208. border-radius: 5vh;
  209. box-shadow: #0000002e 1px 1px 1px 1px;
  210. .title {
  211. text-align: center;
  212. font-size: 3vh;
  213. padding: 4vh;
  214. }
  215. .key {
  216. text-align: center;
  217. font-size: 2.5vh;
  218. padding: 5vh;
  219. padding-bottom: 0.5vh;
  220. text-align: left;
  221. .copy {
  222. color: #ffffff;
  223. margin-left: 2vh;
  224. cursor: pointer;
  225. transition: all 0.3s;
  226. background-color: #3a57b6;
  227. padding: 0.7vh;
  228. border-radius: 15px;
  229. &:hover {
  230. background-color: #1ceedc;
  231. }
  232. }
  233. .showOrHide {
  234. color: #20b4a8;
  235. margin-left: 2vh;
  236. cursor: pointer;
  237. transition: all 0.3s;
  238. &:hover {
  239. color: #476ad9;
  240. }
  241. }
  242. }
  243. .keyStatus {
  244. text-align: center;
  245. font-size: 2.9vh;
  246. padding: 4vh;
  247. margin-top: 1vh;
  248. .success {
  249. color: #ffffff;
  250. background-color: #ff0000;
  251. margin-left: 2vh;
  252. padding: 0.7vh;
  253. border-radius: 15px;
  254. cursor: pointer;
  255. transition: all 0.3s;
  256. &:hover {
  257. background-color: #36db43;
  258. }
  259. }
  260. .fail {
  261. color: #ffffff;
  262. background-color: #36db43;
  263. margin-left: 2vh;
  264. padding: 0.7vh;
  265. border-radius: 15px;
  266. cursor: pointer;
  267. transition: all 0.3s;
  268. &:hover {
  269. background-color: #ff0000;
  270. }
  271. }
  272. }
  273. }
  274. }
  275. </style>