add.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
  1. <template>
  2. <!-- 角色权限 - 添加角色 -->
  3. <div class="role-container">
  4. <s-header :name="pageTitle" :noback="false"></s-header>
  5. <div class="permission-wrapper">
  6. <van-form @submit="onSubmit">
  7. <!-- 角色名称输入 -->
  8. <van-cell-group class="input-card">
  9. <van-field v-model="roleName" name="roleName" :label="$t('role.roleNameLabel')"
  10. :placeholder="$t('role.roleNamePlaceholder')"
  11. :rules="[{ required: true, message: $t('role.roleNamePlaceholder') }]" clearable />
  12. </van-cell-group>
  13. <!-- 全局操作按钮 -->
  14. <!-- <div class="bulk-actions">
  15. <van-button size="small" @click="toggleAll(true)">全选</van-button>
  16. <van-button size="small" @click="toggleAll(false)">反选</van-button>
  17. </div> -->
  18. <!-- 权限分类 -->
  19. <div class="permission-section">
  20. <!-- 常用操作权限 -->
  21. <div class="permission-card common-card">
  22. <div class="card-header">
  23. <div class="header-left">
  24. <van-icon name="todo-list" class="card-icon" />
  25. <h3 class="card-title">{{ $t('role.commonPermission') }}</h3>
  26. </div>
  27. <div class="header-actions">
  28. <van-button size="mini" @click="toggleCategory('common', true)" class="action-btn">{{ $t('role.toggleAll') }}</van-button>
  29. <van-button size="mini" @click="toggleCategory('common', false)" class="action-btn">{{ $t('role.toggleNoAll') }}</van-button>
  30. </div>
  31. </div>
  32. <van-checkbox-group v-model="roleMenuCode">
  33. <div class="checkbox-grid">
  34. <van-checkbox v-for="(item, index) in menuCodeList" :key="'common-' + index" :name="item"
  35. shape="square" icon-size="18" class="perm-item">
  36. <span class="perm-label">{{ $t("permission." + item) }}</span>
  37. </van-checkbox>
  38. </div>
  39. </van-checkbox-group>
  40. </div>
  41. <!-- 远程操作权限 -->
  42. <div class="permission-card remote-card" v-if="roleMenuCode.includes('M1')">
  43. <div class="card-header">
  44. <div class="header-left">
  45. <van-icon name="setting" class="card-icon warn-icon" />
  46. <h3 class="card-title">{{ $t('role.remotePermission') }}</h3>
  47. </div>
  48. <div class="header-actions">
  49. <van-button size="mini" @click="toggleCategory('remote', true)" class="action-btn">{{ $t('role.toggleAll') }}</van-button>
  50. <van-button size="mini" @click="toggleCategory('remote', false)" class="action-btn">{{ $t('role.toggleNoAll') }}</van-button>
  51. </div>
  52. </div>
  53. <van-checkbox-group v-model="controlCode">
  54. <div class="checkbox-grid">
  55. <van-checkbox v-for="(item, index) in remoteCodeList" :key="'remote-' + index" :name="item"
  56. shape="square" icon-size="18" class="perm-item danger-item">
  57. <span class="perm-label">{{ $t("remote." + item) }}</span>
  58. </van-checkbox>
  59. </div>
  60. </van-checkbox-group>
  61. </div>
  62. </div>
  63. <!-- 提交按钮 -->
  64. <div class="submit-footer">
  65. <van-button round block type="primary" native-type="submit" class="submit-btn">
  66. {{ pageTitle }}
  67. </van-button>
  68. </div>
  69. </van-form>
  70. </div>
  71. </div>
  72. </template>
  73. <script>
  74. import { onMounted, reactive, toRefs, ref } from "vue";
  75. import sHeader from "../../components/SimpleHeader";
  76. import { showFailToast, showSuccessToast } from "vant";
  77. import { addSysRole, updateSysRole } from "../../service/role/index";
  78. import { getLoginUser, $M_Menus, remoteMenus } from "../../common/js/utils";
  79. import { useRouter } from "vue-router";
  80. import { useI18n } from "vue-i18n";
  81. export default {
  82. components: { sHeader },
  83. setup() {
  84. // 引入语言
  85. const { t } = useI18n();
  86. const router = useRouter();
  87. const user = getLoginUser();
  88. const pageTitle = ref("");
  89. const roleName = ref("");
  90. // 设置的权限
  91. const menuCodeList = ref([]);
  92. const remoteCodeList = ref([]);
  93. const roleMenuCode = ref([]);
  94. const controlCode = ref([]);
  95. const roleText = ref("");
  96. const equipmentIdText = ref("");
  97. const equipmentIdsOptions = ref([]);
  98. // 全选/反选逻辑
  99. const toggleAll = (checked) => {
  100. const allCommon = menuCodeList.value.map(i => i)
  101. const allRemote = remoteCodeList.value.map(i => i)
  102. roleMenuCode.value = checked ? allCommon : []
  103. controlCode.value = checked ? allRemote : []
  104. }
  105. // 分类全选
  106. const toggleCategory = (type, checked) => {
  107. const values = type === 'common'
  108. ? menuCodeList.value.map(i => i)
  109. : remoteCodeList.value.map(i => i)
  110. if (type === 'common') {
  111. roleMenuCode.value = checked ? values : []
  112. } else {
  113. controlCode.value = checked ? values : []
  114. }
  115. }
  116. let addParams = reactive({
  117. username: "",
  118. password: "",
  119. name: "",
  120. phone: "",
  121. isEnabled: true,
  122. equipmentIds: "",
  123. });
  124. let roleItem = null;
  125. onMounted(async () => {
  126. // 加载样式
  127. roleItem = localStorage.getItem("roleItem");
  128. if (roleItem) {
  129. roleItem = JSON.parse(roleItem);
  130. roleName.value = roleItem.roleName;
  131. roleMenuCode.value = roleItem.menuCodesJson;
  132. controlCode.value = roleItem.controlCodesJson;
  133. pageTitle.value = t("role.modifyRole");
  134. } else {
  135. pageTitle.value = t("role.addRole");
  136. }
  137. menuSet();
  138. });
  139. // 设置菜单权限
  140. const menuSet = () => {
  141. if (user.type !== 0) {
  142. delete $M_Menus['M5'];
  143. delete $M_Menus['M10'];
  144. delete $M_Menus['M17'];
  145. delete $M_Menus['M19'];
  146. delete $M_Menus['M21'];
  147. delete remoteMenus['C19'];
  148. delete remoteMenus['C20'];
  149. delete remoteMenus['C21'];
  150. delete remoteMenus['C22'];
  151. delete remoteMenus['C23'];
  152. }
  153. // 如果是商家,进一步删除 账户操作M3,订单导出M9,
  154. if (user.type === 2) {
  155. delete $M_Menus['M3'];
  156. delete $M_Menus['M9'];
  157. delete $M_Menus['M22'];
  158. }
  159. if (user.type === 2) {
  160. if (user.ifForeign === "1") {
  161. // 国外账号
  162. delete remoteMenus['C10'];
  163. }
  164. if (user.ifForeign === "0") {
  165. // 国内账号
  166. delete remoteMenus['C18'];
  167. delete remoteMenus['C28'];
  168. }
  169. }
  170. for (const key in $M_Menus) {
  171. menuCodeList.value.push(key);
  172. }
  173. for (const key in remoteMenus) {
  174. remoteCodeList.value.push(key);
  175. }
  176. }
  177. const onSubmit = async () => {
  178. if (roleItem) {
  179. updateSysRoleFun();
  180. } else {
  181. addSysRoleFun();
  182. }
  183. };
  184. const addSysRoleFun = async () => {
  185. const params = {
  186. adminId: user.id,
  187. roleName: roleName.value,
  188. menuCodeList: roleMenuCode.value,
  189. controlCodeList: controlCode.value
  190. };
  191. const { data } = await addSysRole(params);
  192. if (data.code === "00000") {
  193. showSuccessToast(t("role.roleAddedSuccessfully"));
  194. setTimeout(() => {
  195. router.go(-1);
  196. }, 1000);
  197. } else {
  198. showFailToast(`${t("role.failedToAddRole")} ${data.message}`);
  199. }
  200. };
  201. const updateSysRoleFun = async () => {
  202. const params = {
  203. adminId: user.id,
  204. roleId: roleItem.roleId,
  205. roleName: roleName.value,
  206. menuCodeList: roleMenuCode.value,
  207. controlCodeList: controlCode.value
  208. };
  209. const { data } = await updateSysRole(params);
  210. if (data.code === "00000") {
  211. showSuccessToast(t("role.successfullyModifiedRole"));
  212. setTimeout(() => {
  213. router.go(-1);
  214. }, 1000);
  215. } else {
  216. showFailToast(`${t("role.failedToModifyRole")} ${data.message}`);
  217. }
  218. };
  219. return {
  220. pageTitle,
  221. roleName,
  222. menuCodeList,
  223. remoteCodeList,
  224. roleMenuCode,
  225. roleText,
  226. controlCode,
  227. equipmentIdText,
  228. equipmentIdsOptions,
  229. ...toRefs(addParams),
  230. onSubmit,
  231. menuSet,
  232. toggleAll,
  233. toggleCategory,
  234. };
  235. },
  236. };
  237. </script>
  238. <style lang="less" scoped>
  239. @import "../../common/style/common.less";
  240. .role-container {
  241. background: #f8faff;
  242. min-height: 100vh;
  243. .bulk-actions {
  244. padding: 0 16px 12px;
  245. display: flex;
  246. gap: 8px;
  247. .van-button {
  248. flex: 1;
  249. border-radius: 14px;
  250. background: #f0f3ff;
  251. color: #4e6bdd;
  252. border: none;
  253. }
  254. }
  255. .input-card {
  256. margin: 16px;
  257. border-radius: 12px;
  258. overflow: hidden;
  259. box-shadow: 0 2px 8px rgba(78, 107, 221, 0.08);
  260. }
  261. .permission-section {
  262. padding: 0 16px;
  263. .permission-card {
  264. background: #fff;
  265. border-radius: 12px;
  266. margin-bottom: 20px;
  267. box-shadow: 0 2px 12px rgba(78, 107, 221, 0.1);
  268. .card-header {
  269. display: flex;
  270. align-items: center;
  271. justify-content: space-between;
  272. padding: 16px;
  273. border-bottom: 1px solid #f0f3ff;
  274. .header-left {
  275. display: flex;
  276. align-items: center;
  277. flex-grow: 1; // 占据剩余空间
  278. .card-icon {
  279. font-size: 20px;
  280. margin-right: 12px;
  281. color: #4e6bdd;
  282. flex-shrink: 0; // 防止图标被压缩
  283. &.warn-icon {
  284. color: #ff5252;
  285. }
  286. }
  287. .card-title {
  288. margin: 0;
  289. font-size: 16px;
  290. font-weight: 600;
  291. color: #2c3e50;
  292. line-height: 1.4;
  293. position: relative;
  294. &::after {
  295. content: '';
  296. position: absolute;
  297. bottom: -4px;
  298. left: 0;
  299. width: 30px;
  300. height: 2px;
  301. background: #4e6bdd;
  302. border-radius: 1px;
  303. }
  304. }
  305. }
  306. .header-actions {
  307. display: flex;
  308. gap: 6px;
  309. .action-btn {
  310. height: 24px;
  311. padding: 0 8px;
  312. border-radius: 12px;
  313. background: rgba(255, 255, 255, 0.9);
  314. border: 1px solid #eee;
  315. font-size: 12px;
  316. &:active {
  317. opacity: 0.8;
  318. }
  319. }
  320. }
  321. }
  322. .checkbox-grid {
  323. display: grid;
  324. grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  325. gap: 12px;
  326. padding: 16px;
  327. .perm-item {
  328. margin: 0;
  329. padding: 12px;
  330. border: 1px solid #f0f3ff;
  331. border-radius: 8px;
  332. transition: all 0.2s;
  333. &:hover {
  334. border-color: #4e6bdd;
  335. box-shadow: 0 2px 6px rgba(78, 107, 221, 0.1);
  336. }
  337. &.danger-item {
  338. border-color: #ffeaea;
  339. background: #fff5f5;
  340. &:hover {
  341. border-color: #ff5252;
  342. }
  343. }
  344. :deep(.van-checkbox__label) {
  345. flex-direction: column;
  346. align-items: flex-start;
  347. }
  348. .perm-label {
  349. font-size: 14px;
  350. color: #34495e;
  351. line-height: 1.4;
  352. }
  353. .perm-desc {
  354. font-size: 12px;
  355. color: #909399;
  356. margin-top: 4px;
  357. }
  358. .perm-warn {
  359. display: flex;
  360. align-items: center;
  361. font-size: 12px;
  362. color: #ff5252;
  363. margin-top: 6px;
  364. .warn-icon {
  365. margin-right: 4px;
  366. }
  367. }
  368. }
  369. }
  370. }
  371. }
  372. .submit-footer {
  373. padding: 24px 16px;
  374. .submit-btn {
  375. height: 44px;
  376. font-size: 16px;
  377. font-weight: 500;
  378. background: linear-gradient(135deg, #4e6bdd, #3b5ab3);
  379. border: none;
  380. box-shadow: 0 4px 12px rgba(78, 107, 221, 0.2);
  381. &:active {
  382. opacity: 0.9;
  383. transform: scale(0.98);
  384. }
  385. }
  386. }
  387. }
  388. </style>