shenze-sysMan/src/views/role/index.vue

<template>
  <!-- 角色权限设置 -->
  <div class="rolePage flex-col">
    <s-header :name="$t('role.rolePermissionSettings')" :noback="false"></s-header>
    <!-- <s-header :name="$t('role.rolePermissionSettings')" :noback="false" targetPath="/accountPer"></s-header> -->
    <!-- <van-nav-bar :title="$t('role.rolePermissionSettings')" left-text="" left-arrow @click-left="onClickLeft" /> -->

    <div class="accountPerBox flex-col">
      <div class="searchRow flex-row justify-between">
        <div class="flex-col">
          <div class="flex-row justify-between bd3">
            <div class="flex-col outer4"></div>
            <span class="flex-col txt2">{{ $t('role.total') }}<span class="discountNumber">{{ accountPerList.length
            }}</span>{{ $t('role.inTotal') }}</span>
          </div>
        </div>
        <div class="flex-col">
          <div class="operBox">
            <div class="addBox" @click="pushAdd()">
              <img class="iconImg" src="../../assets/accountPer/addicon.png" />
              <span>{{ $t('role.addTo') }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="listBox">
        <div v-for="(item, index) in accountPerList" :key="index" class="listItem">
          <div class="itemBox">
            <div class="roleBox">
              <div class="itemRow">{{ item.roleName }}</div>
              <div class="itemRow" style="color: #8787a6;">
                <span v-for="(role, rindex) in item.menuCodesJson" :key="rindex" class="roleItem">{{ showRole(role)
                }}</span>
              </div>
            </div>
            <div class="operBox">
              <div class="operSet" @click="roleEdit(item)">
                <img class="iconImg" src="../../assets/edit.png" />
                <span class="operText">{{ $t('role.edit') }}</span>
              </div>
              <div class="operDelter" @click="roleDelete(item)">
                <img class="iconImg" src="../../assets/delete.png" />
                <span class="operText">{{ $t('role.delete') }}</span>
              </div>
            </div>
          </div>
          <!-- <div class="tipBox" v-if="item.isUse === '0'">已生效</div>
          <div class="tipBox isUseTip" v-if="item.isUse === '1'">已暂停</div> -->
        </div>
      </div>
    </div>
    <van-dialog v-model:show="operCheckShow" :title="$t('role.operationConfirmation')" :showConfirmButton="false"
      :showCancelButton="false">
      <div class="operCheckBox">
        <div class="block5 flex-col"></div>
        <span class="word10">{{ $t('role.pleaseConfirmAgainWhetherToOperate') }}</span>
        <div class="block6 flex-row justify-between">
          <div class="mod7 flex-col" @click="operCheckClear()">
            <span class="info5">{{ $t('role.illThinkAboutItAgain') }}</span>
          </div>
          <div class="mod8 flex-col" @click="operCheck()">
            <span class="info6">{{ $t('role.confirm') }}</span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from 'vue';
import sHeader from "../../components/SimpleHeader";
import { getSysRoleAdminList, deleteSysRole } from '../../service/role/index';
import { showFailToast } from "vant";
import { getLoginUser, styleUrl } from "../../common/js/utils";
import { useRouter } from "vue-router";
import { useI18n } from 'vue-i18n';

export default {
  name: "role",
  components: { sHeader },
  setup() {
    // 引入语言
    const { t } = useI18n();
    const user = getLoginUser();
    const router = useRouter();
    const searchRef = ref(null);
    const accountPerList = ref([]); // 列表集合
    const operCheckShow = ref(false);
    const menuCodeList = [
      { label: t('role.deviceManagement'), value: 'M1' }, //设备管理
      { label: t('role.deviceView'), value: 'M2' },
      // { label: t('role.distributionSettings'), value: 'M3' }, //分销设置
      { label: t('role.accountOperation'), value: 'M3' }, //账户操作
      // { label: t('role.alarmHistory'), value: 'M4' },
      { label: t('role.orderData'), value: 'M4' }, //订单数据
      { label: t('role.advertisingManagement'), value: 'M5' }, //广告管理
      { label: t('role.taskMessage'), value: 'M6' }, //任务消息
      { label: t('role.discountCode'), value: 'M7' }, //优惠码
      { label: t('role.accountPermission'), value: 'M8' }, //账号权限
      { label: t('role.orderExport'), value: 'M9' }, //订单导出
      { label: t('role.shandeSubLedger'), value: 'M10' }, //杉德分账
      { label: t('role.salesRanking'), value: 'M11' }, //销售排行
      { label: t('role.withdrawalAccountNo'), value: 'M12' }, //提现账号
      { label: t('role.standbyWithdrawalAccountNo'), value: 'M13' }, //备用提现账号
      { label: t('role.dataOverview'), value: 'M14' }, //数据概览
      // { label: t('role.orderData'), value: 'M15' },
      { label: t('role.alarmHistory'), value: 'M15' }, //报警历史
      { label: t('role.orderRefund'), value: 'M16' }, //订单退款
      { label: t('role.systemOffline'), value: 'M17' }, //系统脱机
      { label: t('role.labelMan'), value: 'M18' }, //标签管理
      { label: t('role.apkMan'), value: 'M19' } //apk管理
      // { label: t('role.merchantMan'), value: 'M20' } //商户管理
    ];
    let searchParams = reactive({ adminId: user.id });
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('role');
      searchGetList();
    });
    // 搜索点击
    const searchClick = () => { searchRef.value.showSearch(); };
    // 跳转添加账号
    const pushAdd = () => { localStorage.removeItem('roleItem'); router.push('/roleSet'); }
    // 查询列表
    const searchGetList = () => { accountPerList.value = []; getList(); }
    // 搜索弹窗触发搜索
    const search = (data) => {
      searchParams = Object.assign(searchParams, data);
      searchGetList();
    };
    // 获取设备列表数据
    const getList = async () => {
      const { data } = await getSysRoleAdminList(searchParams);
      if (data.code === "00000") {
        accountPerList.value = accountPerList.value.concat(data.data.map(item => {
          return {
            ...item,
            menuCodesJson: JSON.parse(item.menuCodesJson)
          }
        }));
        console.log(accountPerList.value);
      } else { showFailToast(data.message); }
    };
    const showRole = (name) => {
      const menuCode = menuCodeList.filter(item => item.value === name);
      return (menuCode.length > 0) ? menuCode[0].label : name;
    }
    let deleteRoleId = '';
    const roleDelete = (item) => { console.log('roleDelete', item.roleId); deleteRoleId = item.roleId; operCheckShow.value = true; }
    const operCheckClear = () => { operCheckShow.value = false; }
    const operCheck = async () => {
      const { data } = await deleteSysRole({ adminId: user.id, roleId: deleteRoleId });
      if (data.code === '00000') {
        operCheckShow.value = false;
        searchGetList();
      } else { showFailToast(data.message); }
    }
    const roleEdit = async (item) => { localStorage.setItem('roleItem', JSON.stringify(item)); router.push('/roleSet'); };

    // // 回到上一页 账号权限页
    // const onClickLeft = () => {
    //   router.push('/accountPer');
    // };

    return {
      searchRef,
      searchClick,
      pushAdd,
      search,
      accountPerList,
      showRole,
      roleDelete,
      operCheckShow,
      operCheckClear,
      operCheck,
      roleEdit,
      ...toRefs(searchParams),
      // onClickLeft,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
</style>