index.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
  4. <el-form-item label="角色名称" prop="roleName">
  5. <el-input
  6. v-model="queryParams.roleName"
  7. placeholder="请输入角色名称"
  8. clearable
  9. size="small"
  10. style="width: 240px"
  11. @keyup.enter.native="handleQuery"
  12. />
  13. </el-form-item>
  14. <el-form-item label="权限字符" prop="roleKey">
  15. <el-input
  16. v-model="queryParams.roleKey"
  17. placeholder="请输入权限字符"
  18. clearable
  19. size="small"
  20. style="width: 240px"
  21. @keyup.enter.native="handleQuery"
  22. />
  23. </el-form-item>
  24. <el-form-item label="状态" prop="status">
  25. <el-select
  26. v-model="queryParams.status"
  27. placeholder="角色状态"
  28. clearable
  29. size="small"
  30. style="width: 240px"
  31. >
  32. <el-option
  33. v-for="dict in statusOptions"
  34. :key="dict.dictValue"
  35. :label="dict.dictLabel"
  36. :value="dict.dictValue"
  37. />
  38. </el-select>
  39. </el-form-item>
  40. <el-form-item label="创建时间">
  41. <el-date-picker
  42. v-model="dateRange"
  43. size="small"
  44. style="width: 240px"
  45. value-format="yyyy-MM-dd"
  46. type="daterange"
  47. range-separator="-"
  48. start-placeholder="开始日期"
  49. end-placeholder="结束日期"
  50. ></el-date-picker>
  51. </el-form-item>
  52. <el-form-item>
  53. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  54. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  55. </el-form-item>
  56. </el-form>
  57. <el-row :gutter="10" class="mb8">
  58. <el-col :span="1.5">
  59. <el-button
  60. type="primary"
  61. plain
  62. icon="el-icon-plus"
  63. size="mini"
  64. @click="handleAdd"
  65. v-hasPermi="['system:role:add']"
  66. >新增</el-button>
  67. </el-col>
  68. <el-col :span="1.5">
  69. <el-button
  70. type="success"
  71. plain
  72. icon="el-icon-edit"
  73. size="mini"
  74. :disabled="single"
  75. @click="handleUpdate"
  76. v-hasPermi="['system:role:edit']"
  77. >修改</el-button>
  78. </el-col>
  79. <el-col :span="1.5">
  80. <el-button
  81. type="danger"
  82. plain
  83. icon="el-icon-delete"
  84. size="mini"
  85. :disabled="multiple"
  86. @click="handleDelete"
  87. v-hasPermi="['system:role:remove']"
  88. >删除</el-button>
  89. </el-col>
  90. <el-col :span="1.5">
  91. <el-button
  92. type="warning"
  93. plain
  94. icon="el-icon-download"
  95. size="mini"
  96. :loading="exportLoading"
  97. @click="handleExport"
  98. v-hasPermi="['system:role:export']"
  99. >导出</el-button>
  100. </el-col>
  101. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  102. </el-row>
  103. <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
  104. <el-table-column type="selection" width="55" align="center" />
  105. <el-table-column label="角色编号" prop="roleId" width="120" />
  106. <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
  107. <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
  108. <el-table-column label="显示顺序" prop="roleSort" width="100" />
  109. <el-table-column label="状态" align="center" width="100">
  110. <template slot-scope="scope">
  111. <el-switch
  112. v-model="scope.row.status"
  113. active-value="0"
  114. inactive-value="1"
  115. @change="handleStatusChange(scope.row)"
  116. ></el-switch>
  117. </template>
  118. </el-table-column>
  119. <el-table-column label="创建时间" align="center" prop="createTime" width="180">
  120. <template slot-scope="scope">
  121. <span>{{ parseTime(scope.row.createTime) }}</span>
  122. </template>
  123. </el-table-column>
  124. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  125. <template slot-scope="scope" v-if="scope.row.roleId !== 1">
  126. <el-button
  127. size="mini"
  128. type="text"
  129. icon="el-icon-edit"
  130. @click="handleUpdate(scope.row)"
  131. v-hasPermi="['system:role:edit']"
  132. >修改</el-button>
  133. <el-button
  134. size="mini"
  135. type="text"
  136. icon="el-icon-delete"
  137. @click="handleDelete(scope.row)"
  138. v-hasPermi="['system:role:remove']"
  139. >删除</el-button>
  140. <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
  141. <span class="el-dropdown-link">
  142. <i class="el-icon-d-arrow-right el-icon--right"></i>更多
  143. </span>
  144. <el-dropdown-menu slot="dropdown">
  145. <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
  146. v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
  147. <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
  148. v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
  149. </el-dropdown-menu>
  150. </el-dropdown>
  151. </template>
  152. </el-table-column>
  153. </el-table>
  154. <pagination
  155. v-show="total>0"
  156. :total="total"
  157. :page.sync="queryParams.pageNum"
  158. :limit.sync="queryParams.pageSize"
  159. @pagination="getList"
  160. />
  161. <!-- 添加或修改角色配置对话框 -->
  162. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  163. <el-form ref="form" :model="form" :rules="rules" label-width="100px">
  164. <el-form-item label="角色名称" prop="roleName">
  165. <el-input v-model="form.roleName" placeholder="请输入角色名称" />
  166. </el-form-item>
  167. <el-form-item prop="roleKey">
  168. <span slot="label">
  169. <el-tooltip content="控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
  170. <i class="el-icon-question"></i>
  171. </el-tooltip>
  172. 权限字符
  173. </span>
  174. <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
  175. </el-form-item>
  176. <el-form-item label="角色顺序" prop="roleSort">
  177. <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
  178. </el-form-item>
  179. <el-form-item label="状态">
  180. <el-radio-group v-model="form.status">
  181. <el-radio
  182. v-for="dict in statusOptions"
  183. :key="dict.dictValue"
  184. :label="dict.dictValue"
  185. >{{dict.dictLabel}}</el-radio>
  186. </el-radio-group>
  187. </el-form-item>
  188. <el-form-item label="是否可以查看手机全号" >
  189. <span slot="label">
  190. <el-tooltip content="是否可以查看手机全号" placement="top">
  191. <i class="el-icon-question"></i>
  192. </el-tooltip>
  193. 号码权限
  194. </span>
  195. <el-radio-group v-model="form.isCheckPhone">
  196. <el-radio :label=0>否</el-radio>
  197. <el-radio :label=1>是</el-radio>
  198. </el-radio-group>
  199. </el-form-item>
  200. <el-form-item label="菜单权限">
  201. <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
  202. <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
  203. <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
  204. <el-tree
  205. class="tree-border"
  206. :data="menuOptions"
  207. show-checkbox
  208. ref="menu"
  209. node-key="id"
  210. :check-strictly="!form.menuCheckStrictly"
  211. empty-text="加载中,请稍后"
  212. :props="defaultProps"
  213. ></el-tree>
  214. </el-form-item>
  215. <el-form-item label="备注">
  216. <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
  217. </el-form-item>
  218. </el-form>
  219. <div slot="footer" class="dialog-footer">
  220. <el-button type="primary" @click="submitForm">确 定</el-button>
  221. <el-button @click="cancel">取 消</el-button>
  222. </div>
  223. </el-dialog>
  224. <!-- 分配角色数据权限对话框 -->
  225. <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
  226. <el-form :model="form" label-width="80px">
  227. <el-form-item label="角色名称">
  228. <el-input v-model="form.roleName" :disabled="true" />
  229. </el-form-item>
  230. <el-form-item label="权限字符">
  231. <el-input v-model="form.roleKey" :disabled="true" />
  232. </el-form-item>
  233. <el-form-item label="权限范围">
  234. <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
  235. <el-option
  236. v-for="item in dataScopeOptions"
  237. :key="item.value"
  238. :label="item.label"
  239. :value="item.value"
  240. ></el-option>
  241. </el-select>
  242. </el-form-item>
  243. <el-form-item label="数据权限" v-show="form.dataScope == 2">
  244. <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
  245. <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
  246. <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
  247. <el-tree
  248. class="tree-border"
  249. :data="deptOptions"
  250. show-checkbox
  251. default-expand-all
  252. ref="dept"
  253. node-key="id"
  254. :check-strictly="!form.deptCheckStrictly"
  255. empty-text="加载中,请稍后"
  256. :props="defaultProps"
  257. ></el-tree>
  258. </el-form-item>
  259. </el-form>
  260. <div slot="footer" class="dialog-footer">
  261. <el-button type="primary" @click="submitDataScope">确 定</el-button>
  262. <el-button @click="cancelDataScope">取 消</el-button>
  263. </div>
  264. </el-dialog>
  265. </div>
  266. </template>
  267. <script>
  268. import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";
  269. import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
  270. import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";
  271. export default {
  272. name: "Role",
  273. data() {
  274. return {
  275. // 遮罩层
  276. loading: true,
  277. // 导出遮罩层
  278. exportLoading: false,
  279. // 选中数组
  280. ids: [],
  281. // 非单个禁用
  282. single: true,
  283. // 非多个禁用
  284. multiple: true,
  285. // 显示搜索条件
  286. showSearch: true,
  287. // 总条数
  288. total: 0,
  289. // 角色表格数据
  290. roleList: [],
  291. // 弹出层标题
  292. title: "",
  293. // 是否显示弹出层
  294. open: false,
  295. // 是否显示弹出层(数据权限)
  296. openDataScope: false,
  297. menuExpand: false,
  298. menuNodeAll: false,
  299. deptExpand: true,
  300. deptNodeAll: false,
  301. // 日期范围
  302. dateRange: [],
  303. // 状态数据字典
  304. statusOptions: [],
  305. // 数据范围选项
  306. dataScopeOptions: [
  307. {
  308. value: "1",
  309. label: "全部数据权限"
  310. },
  311. {
  312. value: "2",
  313. label: "自定数据权限"
  314. },
  315. {
  316. value: "3",
  317. label: "本部门数据权限"
  318. },
  319. {
  320. value: "4",
  321. label: "本部门及以下数据权限"
  322. },
  323. {
  324. value: "5",
  325. label: "仅本人数据权限"
  326. }
  327. ],
  328. // 菜单列表
  329. menuOptions: [],
  330. // 部门列表
  331. deptOptions: [],
  332. // 查询参数
  333. queryParams: {
  334. pageNum: 1,
  335. pageSize: 10,
  336. roleName: undefined,
  337. roleKey: undefined,
  338. status: undefined
  339. },
  340. // 表单参数
  341. form: {},
  342. defaultProps: {
  343. children: "children",
  344. label: "label"
  345. },
  346. // 表单校验
  347. rules: {
  348. roleName: [
  349. { required: true, message: "角色名称不能为空", trigger: "blur" }
  350. ],
  351. roleKey: [
  352. { required: true, message: "权限字符不能为空", trigger: "blur" }
  353. ],
  354. roleSort: [
  355. { required: true, message: "角色顺序不能为空", trigger: "blur" }
  356. ]
  357. }
  358. };
  359. },
  360. created() {
  361. this.getList();
  362. this.getDicts("sys_normal_disable").then(response => {
  363. this.statusOptions = response.data;
  364. });
  365. },
  366. methods: {
  367. /** 查询角色列表 */
  368. getList() {
  369. this.loading = true;
  370. listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
  371. response => {
  372. this.roleList = response.rows;
  373. this.total = response.total;
  374. this.loading = false;
  375. }
  376. );
  377. },
  378. /** 查询菜单树结构 */
  379. getMenuTreeselect() {
  380. menuTreeselect().then(response => {
  381. this.menuOptions = response.data;
  382. });
  383. },
  384. /** 查询部门树结构 */
  385. getDeptTreeselect() {
  386. deptTreeselect().then(response => {
  387. this.deptOptions = response.data;
  388. });
  389. },
  390. // 所有菜单节点数据
  391. getMenuAllCheckedKeys() {
  392. // 目前被选中的菜单节点
  393. let checkedKeys = this.$refs.menu.getCheckedKeys();
  394. // 半选中的菜单节点
  395. let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
  396. checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
  397. return checkedKeys;
  398. },
  399. // 所有部门节点数据
  400. getDeptAllCheckedKeys() {
  401. // 目前被选中的部门节点
  402. let checkedKeys = this.$refs.dept.getCheckedKeys();
  403. // 半选中的部门节点
  404. let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
  405. checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
  406. return checkedKeys;
  407. },
  408. /** 根据角色ID查询菜单树结构 */
  409. getRoleMenuTreeselect(roleId) {
  410. return roleMenuTreeselect(roleId).then(response => {
  411. this.menuOptions = response.menus;
  412. return response;
  413. });
  414. },
  415. /** 根据角色ID查询部门树结构 */
  416. getRoleDeptTreeselect(roleId) {
  417. return roleDeptTreeselect(roleId).then(response => {
  418. this.deptOptions = response.depts;
  419. return response;
  420. });
  421. },
  422. // 角色状态修改
  423. handleStatusChange(row) {
  424. let text = row.status === "0" ? "启用" : "停用";
  425. this.$confirm('确认要"' + text + '""' + row.roleName + '"角色吗?', "警告", {
  426. confirmButtonText: "确定",
  427. cancelButtonText: "取消",
  428. type: "warning"
  429. }).then(function() {
  430. return changeRoleStatus(row.roleId, row.status);
  431. }).then(() => {
  432. this.msgSuccess(text + "成功");
  433. }).catch(function() {
  434. row.status = row.status === "0" ? "1" : "0";
  435. });
  436. },
  437. // 取消按钮
  438. cancel() {
  439. this.open = false;
  440. this.reset();
  441. },
  442. // 取消按钮(数据权限)
  443. cancelDataScope() {
  444. this.openDataScope = false;
  445. this.reset();
  446. },
  447. // 表单重置
  448. reset() {
  449. if (this.$refs.menu != undefined) {
  450. this.$refs.menu.setCheckedKeys([]);
  451. }
  452. this.menuExpand = false,
  453. this.menuNodeAll = false,
  454. this.deptExpand = true,
  455. this.deptNodeAll = false,
  456. this.form = {
  457. roleId: undefined,
  458. roleName: undefined,
  459. roleKey: undefined,
  460. roleSort: 0,
  461. status: "0",
  462. isCheckPhone:0,
  463. menuIds: [],
  464. deptIds: [],
  465. menuCheckStrictly: true,
  466. deptCheckStrictly: true,
  467. remark: undefined
  468. };
  469. this.resetForm("form");
  470. },
  471. /** 搜索按钮操作 */
  472. handleQuery() {
  473. this.queryParams.pageNum = 1;
  474. this.getList();
  475. },
  476. /** 重置按钮操作 */
  477. resetQuery() {
  478. this.dateRange = [];
  479. this.resetForm("queryForm");
  480. this.handleQuery();
  481. },
  482. // 多选框选中数据
  483. handleSelectionChange(selection) {
  484. this.ids = selection.map(item => item.roleId)
  485. this.single = selection.length!=1
  486. this.multiple = !selection.length
  487. },
  488. // 更多操作触发
  489. handleCommand(command, row) {
  490. switch (command) {
  491. case "handleDataScope":
  492. this.handleDataScope(row);
  493. break;
  494. case "handleAuthUser":
  495. this.handleAuthUser(row);
  496. break;
  497. default:
  498. break;
  499. }
  500. },
  501. // 树权限(展开/折叠)
  502. handleCheckedTreeExpand(value, type) {
  503. if (type == 'menu') {
  504. let treeList = this.menuOptions;
  505. for (let i = 0; i < treeList.length; i++) {
  506. this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
  507. }
  508. } else if (type == 'dept') {
  509. let treeList = this.deptOptions;
  510. for (let i = 0; i < treeList.length; i++) {
  511. this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
  512. }
  513. }
  514. },
  515. // 树权限(全选/全不选)
  516. handleCheckedTreeNodeAll(value, type) {
  517. if (type == 'menu') {
  518. this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
  519. } else if (type == 'dept') {
  520. this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
  521. }
  522. },
  523. // 树权限(父子联动)
  524. handleCheckedTreeConnect(value, type) {
  525. if (type == 'menu') {
  526. this.form.menuCheckStrictly = value ? true: false;
  527. } else if (type == 'dept') {
  528. this.form.deptCheckStrictly = value ? true: false;
  529. }
  530. },
  531. /** 新增按钮操作 */
  532. handleAdd() {
  533. this.reset();
  534. this.getMenuTreeselect();
  535. this.open = true;
  536. this.title = "添加角色";
  537. },
  538. /** 修改按钮操作 */
  539. handleUpdate(row) {
  540. this.reset();
  541. const roleId = row.roleId || this.ids
  542. const roleMenu = this.getRoleMenuTreeselect(roleId);
  543. getRole(roleId).then(response => {
  544. this.form = response.data;
  545. this.open = true;
  546. this.$nextTick(() => {
  547. roleMenu.then(res => {
  548. let checkedKeys = res.checkedKeys
  549. checkedKeys.forEach((v) => {
  550. this.$nextTick(()=>{
  551. this.$refs.menu.setChecked(v, true ,false);
  552. })
  553. })
  554. });
  555. });
  556. this.title = "修改角色";
  557. });
  558. },
  559. /** 选择角色权限范围触发 */
  560. dataScopeSelectChange(value) {
  561. if(value !== '2') {
  562. this.$refs.dept.setCheckedKeys([]);
  563. }
  564. },
  565. /** 分配数据权限操作 */
  566. handleDataScope(row) {
  567. this.reset();
  568. const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId);
  569. getRole(row.roleId).then(response => {
  570. this.form = response.data;
  571. this.openDataScope = true;
  572. this.$nextTick(() => {
  573. roleDeptTreeselect.then(res => {
  574. this.$refs.dept.setCheckedKeys(res.checkedKeys);
  575. });
  576. });
  577. this.title = "分配数据权限";
  578. });
  579. },
  580. /** 分配用户操作 */
  581. handleAuthUser: function(row) {
  582. const roleId = row.roleId;
  583. this.$router.push("/system/role-auth/user/" + roleId);
  584. },
  585. /** 提交按钮 */
  586. submitForm: function() {
  587. this.$refs["form"].validate(valid => {
  588. if (valid) {
  589. if (this.form.roleId != undefined) {
  590. this.form.menuIds = this.getMenuAllCheckedKeys();
  591. updateRole(this.form).then(response => {
  592. this.msgSuccess("修改成功");
  593. this.open = false;
  594. this.getList();
  595. });
  596. } else {
  597. this.form.menuIds = this.getMenuAllCheckedKeys();
  598. addRole(this.form).then(response => {
  599. this.msgSuccess("新增成功");
  600. this.open = false;
  601. this.getList();
  602. });
  603. }
  604. }
  605. });
  606. },
  607. /** 提交按钮(数据权限) */
  608. submitDataScope: function() {
  609. if (this.form.roleId != undefined) {
  610. this.form.deptIds = this.getDeptAllCheckedKeys();
  611. dataScope(this.form).then(response => {
  612. this.msgSuccess("修改成功");
  613. this.openDataScope = false;
  614. this.getList();
  615. });
  616. }
  617. },
  618. /** 删除按钮操作 */
  619. handleDelete(row) {
  620. const roleIds = row.roleId || this.ids;
  621. this.$confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?', "警告", {
  622. confirmButtonText: "确定",
  623. cancelButtonText: "取消",
  624. type: "warning"
  625. }).then(function() {
  626. return delRole(roleIds);
  627. }).then(() => {
  628. this.getList();
  629. this.msgSuccess("删除成功");
  630. }).catch(() => {});
  631. },
  632. /** 导出按钮操作 */
  633. handleExport() {
  634. const queryParams = this.queryParams;
  635. this.$confirm('是否确认导出所有角色数据项?', "警告", {
  636. confirmButtonText: "确定",
  637. cancelButtonText: "取消",
  638. type: "warning"
  639. }).then(() => {
  640. this.exportLoading = true;
  641. return exportRole(queryParams);
  642. }).then(response => {
  643. this.download(response.msg);
  644. this.exportLoading = false;
  645. }).catch(() => {});
  646. }
  647. }
  648. };
  649. </script>