index.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  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, styleUrl } 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.accountOperation'), value: 'M3' }, //账户操作
  90. // { label: t('role.alarmHistory'), value: 'M4' },
  91. { label: t('role.orderData'), value: 'M4' }, //订单数据
  92. { label: t('role.advertisingManagement'), value: 'M5' }, //广告管理
  93. { label: t('role.taskMessage'), value: 'M6' }, //任务消息
  94. { label: t('role.discountCode'), value: 'M7' }, //优惠码
  95. { label: t('role.accountPermission'), value: 'M8' }, //账号权限
  96. { label: t('role.orderExport'), value: 'M9' }, //订单导出
  97. { label: t('role.shandeSubLedger'), value: 'M10' }, //杉德分账
  98. { label: t('role.salesRanking'), value: 'M11' }, //销售排行
  99. { label: t('role.withdrawalAccountNo'), value: 'M12' }, //提现账号
  100. { label: t('role.standbyWithdrawalAccountNo'), value: 'M13' }, //备用提现账号
  101. { label: t('role.dataOverview'), value: 'M14' }, //数据概览
  102. // { label: t('role.orderData'), value: 'M15' },
  103. { label: t('role.alarmHistory'), value: 'M15' }, //报警历史
  104. { label: t('role.orderRefund'), value: 'M16' }, //订单退款
  105. { label: t('role.systemOffline'), value: 'M17' }, //系统脱机
  106. { label: t('role.labelMan'), value: 'M18' }, //标签管理
  107. { label: t('role.apkMan'), value: 'M19' } //apk管理
  108. // { label: t('role.merchantMan'), value: 'M20' } //商户管理
  109. ];
  110. let searchParams = reactive({ adminId: user.id });
  111. // 初始化页面获取列表
  112. onMounted(async () => {
  113. // 加载样式
  114. styleUrl('role');
  115. searchGetList();
  116. });
  117. // 搜索点击
  118. const searchClick = () => { searchRef.value.showSearch(); };
  119. // 跳转添加账号
  120. const pushAdd = () => { localStorage.removeItem('roleItem'); router.push('/roleSet'); }
  121. // 查询列表
  122. const searchGetList = () => { accountPerList.value = []; getList(); }
  123. // 搜索弹窗触发搜索
  124. const search = (data) => {
  125. searchParams = Object.assign(searchParams, data);
  126. searchGetList();
  127. };
  128. // 获取设备列表数据
  129. const getList = async () => {
  130. const { data } = await getSysRoleAdminList(searchParams);
  131. if (data.code === "00000") {
  132. accountPerList.value = accountPerList.value.concat(data.data.map(item => {
  133. return {
  134. ...item,
  135. menuCodesJson: JSON.parse(item.menuCodesJson)
  136. }
  137. }));
  138. console.log(accountPerList.value);
  139. } else { Toast.fail(data.message); }
  140. };
  141. const showRole = (name) => {
  142. const menuCode = menuCodeList.filter(item => item.value === name);
  143. return (menuCode.length > 0) ? menuCode[0].label : name;
  144. }
  145. let deleteRoleId = '';
  146. const roleDelete = (item) => { console.log('roleDelete', item.roleId); deleteRoleId = item.roleId; operCheckShow.value = true; }
  147. const operCheckClear = () => { operCheckShow.value = false; }
  148. const operCheck = async () => {
  149. const { data } = await deleteSysRole({ adminId: user.id, roleId: deleteRoleId });
  150. if (data.code === '00000') {
  151. operCheckShow.value = false;
  152. searchGetList();
  153. } else { Toast.fail(data.message); }
  154. }
  155. const roleEdit = async (item) => { localStorage.setItem('roleItem', JSON.stringify(item)); router.push('/roleSet'); }
  156. return {
  157. searchRef,
  158. searchClick,
  159. pushAdd,
  160. search,
  161. accountPerList,
  162. showRole,
  163. roleDelete,
  164. operCheckShow,
  165. operCheckClear,
  166. operCheck,
  167. roleEdit,
  168. ...toRefs(searchParams),
  169. };
  170. },
  171. };
  172. </script>
  173. <style lang="less" scoped>
  174. @import "../../common/style/common.less";
  175. </style>