accout-vue3-ui/src/views/interest/role/index.vue

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import { useColumns } from "./columns";
import { httpList, httpStatus } from "/@/api/interest/role";
import { type FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { TableProBar } from "/@/components/ReTable";
import { type PaginationProps } from "@pureadmin/table";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useNav } from "/@/layout/hooks/nav";
import { statusList } from "/@/utils/status";
import { responseHandle } from "/@/utils/responseHandle";
import { useUserStoreHook } from "/@/store/modules/user";
import addEdit from "./addEdit.vue";
import { useCompany } from "/@/hooks/core/useCompany";
const { logout } = useNav();

defineOptions({
  name: "role"
});

const form = reactive({
  level: "",
  role_name: "",
  status: "",
  page: 1,
  size: 15
});
const powers = ref([]);
const dataList = ref([]);
const loading = ref(true);
const { columns } = useColumns();
const showModel = ref(false);
const itemId = ref("");
const isDetails = ref("add");
const formRef = ref<FormInstance>();

const { currentCompany } = useCompany();

const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 15,
  currentPage: 1,
  background: true
});
//修改状态
const handleStatus = async row => {
  const { id, status } = row;
  const { code, message } = await httpStatus({
    roleid: id,
    status: status + "" === "1" ? "0" : "1"
  });
  responseHandle({
    code,
    message,
    logout,
    handler: () => onSearch()
  });
};

async function handleCurrentChange(val: number) {
  form.page = val;
  await onSearch();
}

async function handleSizeChange(val: number) {
  form.size = val;
  form.page = 1;
  await onSearch();
}

function handleSelectionChange(val) {
  console.log("handleSelectionChange", val);
}

async function onSearch() {
  loading.value = true;
  const { code, data, message } = await httpList({
    ...form,
    companyNo: currentCompany.value.companyNo
  });
  if (code === 0) {
    const { list, count } = data;
    dataList.value = list ?? [];
    pagination.total = count ?? 0;
    pagination.pageSize = form.size;
    pagination.currentPage = form.page;
  } else if (code > 100 && code < 140) {
    logout();
  } else {
    ElMessage.error(message);
  }
  loading.value = false;
}
async function resetSearch() {
  form.page = 1;
  await onSearch();
}
//新建/编辑/详情弹窗
function editItem(id, type) {
  if (!currentCompany.value.companyNo) {
    ElMessage.warning("请选择一个公司");
    return;
  }

  itemId.value = id;
  isDetails.value = type;
  showModel.value = true;
}
const submitRefresh = () => {
  showModel.value = false;
  onSearch();
};
const submitCancel = () => {
  showModel.value = false;
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  form.page = 1;
  onSearch();
};

onMounted(() => {
  powers.value = useUserStoreHook().getMenuActions("role");
  if (powers.value.some(i => i == "001")) {
    onSearch();
  }
});

watch(
  () => currentCompany.value,
  () => onSearch()
);
</script>

<template>
  <div class="main role">
    <div v-show="powers.some(i => i == '001')">
      <el-form
        ref="formRef"
        :inline="true"
        :model="form"
        :label-width="0"
        class="bg-white w-99/100 pl-8 pt-4"
      >
        <el-form-item prop="status">
          <el-select
            v-model="form.status"
            style="width: 100%"
            placeholder="角色状态"
            clearable
          >
            <el-option
              v-for="(si, sii) in statusList"
              :key="'status' + si.value + sii"
              :label="si.label"
              :value="si.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="role_name">
          <el-input v-model="form.role_name" placeholder="角色名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :icon="useRenderIcon('search')"
            :loading="loading"
            @click="resetSearch"
          >
            搜索
          </el-button>
          <el-button
            :icon="useRenderIcon('refresh')"
            @click="resetForm(formRef)"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <TableProBar
        title="公司角色管理"
        :loading="loading"
        :dataList="dataList"
        @refresh="onSearch"
      >
        <template #buttons>
          <el-button
            type="primary"
            v-if="powers.some(i => i == '002')"
            :icon="useRenderIcon('add')"
            @click="editItem('', 'add')"
          >
            新增角色
          </el-button>
        </template>
        <template v-slot="{ size, checkList }">
          <PureTable
            border
            align="left"
            showOverflowTooltip
            table-layout="auto"
            :size="size"
            :data="dataList"
            :columns="columns"
            :checkList="checkList"
            :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false"
            :header-cell-style="{ background: '#fafafa', color: '#606266' }"
            @selection-change="handleSelectionChange"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                v-if="powers.some(i => i == '007')"
                :size="size"
                @click="editItem(row.id, 'view')"
                :icon="useRenderIcon('eye-view')"
              />
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                v-if="powers.some(i => i == '005')"
                @click="editItem(row.id, 'edit')"
                :icon="useRenderIcon('edits')"
              />
              <el-popconfirm
                :title="row.status === '1' ? '改为禁用？' : '改为启用？'"
                v-if="
                  (powers.some(i => i == '004') && row.status + '' === '1') ||
                  (powers.some(i => i == '003') && row.status + '' === '0')
                "
                @confirm="handleStatus(row)"
              >
                <template #reference>
                  <el-button
                    class="reset-margin"
                    link
                    type="primary"
                    :size="size"
                    :icon="
                      useRenderIcon(
                        row.status === '1'
                          ? 'close-circle-line'
                          : 'checkbox-circle-line'
                      )
                    " /></template
              ></el-popconfirm>
            </template>
          </PureTable>
        </template>
      </TableProBar>
      <addEdit
        :itemId="itemId"
        :isDetails="isDetails"
        :show-model="showModel"
        @refresh="submitRefresh"
        @cancel="submitCancel"
      />
    </div>
    <NoAuth v-show="!powers.some(i => i == '001')" />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>