index.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <template>
  2. <!-- 角色权限设置 -->
  3. <div class="accountPerPage flex-col">
  4. <s-header :name="$t('role.rolePermissionSettings')" :noback="false"></s-header>
  5. <div class="accountPerBox flex-col">
  6. <div class="searchRow flex-row justify-between">
  7. <div class="flex-col">
  8. <div class="flex-row justify-between bd3">
  9. <div class="flex-col outer4"></div>
  10. <span class="flex-col txt2">{{ $t('role.total') }}<span class="discountNumber">{{ accountPerList.length
  11. }}</span>{{ $t('role.inTotal') }}</span>
  12. </div>
  13. </div>
  14. <div class="flex-col">
  15. <div class="operBox">
  16. <div class="addBox" @click="pushAdd()">
  17. <img class="iconImg" src="../../assets/accountPer/addicon.png" />
  18. <span>{{ $t('role.addTo') }}</span>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. <div class="listBox">
  24. <div v-for="(item, index) in accountPerList" :key="index" class="listItem">
  25. <div class="itemBox">
  26. <div class="roleBox">
  27. <div class="itemRow">{{ item.roleName }}</div>
  28. <div class="itemRow" style="color: #8787a6;">
  29. <span v-for="(role, rindex) in item.menuCodesJson" :key="rindex" class="roleItem">{{ showRole(role)
  30. }}</span>
  31. </div>
  32. </div>
  33. <div class="operBox">
  34. <div class="operSet" @click="roleEdit(item)">
  35. <img class="iconImg" src="../../assets/edit.png" />
  36. <span class="operText">{{ $t('role.edit') }}</span>
  37. </div>
  38. <div class="operDelter" @click="roleDelete(item)">
  39. <img class="iconImg" src="../../assets/delete.png" />
  40. <span class="operText">{{ $t('role.delete') }}</span>
  41. </div>
  42. </div>
  43. </div>
  44. <!-- <div class="tipBox" v-if="item.isUse === '0'">已生效</div>
  45. <div class="tipBox isUseTip" v-if="item.isUse === '1'">已暂停</div> -->
  46. </div>
  47. </div>
  48. </div>
  49. <van-dialog v-model:show="operCheckShow" :title="$t('role.operationConfirmation')" :showConfirmButton="false"
  50. :showCancelButton="false">
  51. <div class="operCheckBox">
  52. <div class="block5 flex-col"></div>
  53. <span class="word10">{{ $t('role.pleaseConfirmAgainWhetherToOperate') }}</span>
  54. <div class="block6 flex-row justify-between">
  55. <div class="mod7 flex-col" @click="operCheckClear()">
  56. <span class="info5">{{ $t('role.illThinkAboutItAgain') }}</span>
  57. </div>
  58. <div class="mod8 flex-col" @click="operCheck()">
  59. <span class="info6">{{ $t('role.confirm') }}</span>
  60. </div>
  61. </div>
  62. </div>
  63. </van-dialog>
  64. </div>
  65. </template>
  66. <script>
  67. import { onMounted, reactive, toRefs, ref } from 'vue';
  68. import sHeader from "@/components/SimpleHeader";
  69. import { getSysRoleAdminList, deleteSysRole } from '@/service/role/index';
  70. import { Toast } from "vant";
  71. import { getLoginUser } from "@/common/js/utils";
  72. import { useRouter } from "vue-router";
  73. import { useI18n } from 'vue-i18n';
  74. export default {
  75. name:"role",
  76. components: { sHeader },
  77. setup() {
  78. // 引入语言
  79. const { t } = useI18n();
  80. const user = getLoginUser();
  81. const router = useRouter();
  82. const searchRef = ref(null);
  83. const accountPerList = ref([]); // 列表集合
  84. const operCheckShow = ref(false);
  85. const menuCodeList = [
  86. { label: t('role.deviceManagement'), value: 'M1' },
  87. { label: t('role.deviceView'), value: 'M2' },
  88. { label: t('role.distributionSettings'), value: 'M3' },
  89. { label: t('role.alarmHistory'), value: 'M4' },
  90. { label: t('role.advertisingManagement'), value: 'M5' },
  91. { label: t('role.taskMessage'), value: 'M6' },
  92. { label: t('role.discountCode'), value: 'M7' },
  93. { label: t('role.accountPermission'), value: 'M8' },
  94. { label: t('role.orderExport'), value: 'M9' },
  95. { label: t('role.shandeSubLedger'), value: 'M10' },
  96. { label: t('role.salesRanking'), value: 'M11' },
  97. { label: t('role.withdrawalAccountNo'), value: 'M12' },
  98. { label: t('role.standbyWithdrawalAccountNo'), value: 'M13' },
  99. { label: t('role.dataOverview'), value: 'M14' },
  100. { label: t('role.orderData'), value: 'M15' },
  101. { label: t('role.orderRefund'), value: 'M16' },
  102. { label: t('role.systemOffline'), value: 'M17' },
  103. { label: t('role.labelMan'), value: 'M18' },
  104. { label: t('role.apkMan'), value: 'M19' },
  105. ];
  106. let searchParams = reactive({ adminId: user.id });
  107. // 初始化页面获取列表
  108. onMounted(async () => { searchGetList(); });
  109. // 搜索点击
  110. const searchClick = () => { searchRef.value.showSearch(); };
  111. // 跳转添加账号
  112. const pushAdd = () => { localStorage.removeItem('roleItem'); router.push('/roleSet'); }
  113. // 查询列表
  114. const searchGetList = () => { accountPerList.value = []; getList(); }
  115. // 搜索弹窗触发搜索
  116. const search = (data) => {
  117. searchParams = Object.assign(searchParams, data);
  118. searchGetList();
  119. };
  120. // 获取设备列表数据
  121. const getList = async () => {
  122. const { data } = await getSysRoleAdminList(searchParams);
  123. if (data.code === "00000") {
  124. accountPerList.value = accountPerList.value.concat(data.data.map(item => {
  125. return {
  126. ...item,
  127. menuCodesJson: JSON.parse(item.menuCodesJson)
  128. }
  129. }));
  130. console.log(accountPerList.value);
  131. } else { Toast.fail(data.message); }
  132. };
  133. const showRole = (name) => {
  134. const menuCode = menuCodeList.filter(item => item.value === name);
  135. return (menuCode.length > 0) ? menuCode[0].label : name;
  136. }
  137. let deleteRoleId = '';
  138. const roleDelete = (item) => { console.log('roleDelete', item.roleId); deleteRoleId = item.roleId; operCheckShow.value = true; }
  139. const operCheckClear = () => { operCheckShow.value = false; }
  140. const operCheck = async () => {
  141. const { data } = await deleteSysRole({ adminId: user.id, roleId: deleteRoleId });
  142. if (data.code === '00000') {
  143. operCheckShow.value = false;
  144. searchGetList();
  145. } else { Toast.fail(data.message); }
  146. }
  147. const roleEdit = async (item) => { localStorage.setItem('roleItem', JSON.stringify(item)); router.push('/roleSet'); }
  148. return {
  149. searchRef,
  150. searchClick,
  151. pushAdd,
  152. search,
  153. accountPerList,
  154. showRole,
  155. roleDelete,
  156. operCheckShow,
  157. operCheckClear,
  158. operCheck,
  159. roleEdit,
  160. ...toRefs(searchParams),
  161. };
  162. },
  163. };
  164. </script>
  165. <style lang="less" scoped>
  166. @import "../../common/style/common.less";
  167. @import "./index.less";
  168. </style>