SZYGM1.0/src/views/userManagement/role/index.vue

<template>
  <div class="application scroll-y">
    <div class="application-head flex">
      <div class="manageTitle">角色管理</div>
      <div class="flex-wrap">
        <Search @clear="clear" @search="search" />
        <div v-permission="['new_role_button']">
          <el-button size="default" @click="addApp" plain>新增</el-button>
        </div>
      </div>
    </div>
    <div class="application-content">
      <Table :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
    </div>
    <!--删除弹框-->
    <Dialog :flag="flag" msgTitle="删除角色" type="del" :delName="title" @delRest="delRest" @delRemove="remove" />
    <!--新增/编辑-->
    <Dialog :flag="editDialogVisible" :msgTitle="editDialogTitle" @submitForm="submitForm(ruleFormRef)" @resetForm="resetForm(ruleFormRef)" :show-flag="true">
      <el-form ref="ruleFormRef" :model="ruleForm" label-width="110px" class="demo-ruleForm">
        <el-form-item label="角色ID" :rules="[{required: true,message: '请输入角色ID',trigger: 'blur',}]" prop="role_id">
          <el-input :disabled="msgFlag" v-model="ruleForm.role_id" size="default" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色名称" :rules="[{required: true,message: '请输入角色名称',trigger: 'blur',}]" prop="role_name">
          <el-input v-model="ruleForm.role_name" size="default" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色描述" prop="role_comment">
          <el-input v-model="ruleForm.role_comment" size="default" type="textarea" :rows="3" placeholder="请输入角色描述" />
        </el-form-item>
        <el-form-item label="是否启用" :rules="[{required: true,message: '请选择是否启用',trigger: 'change',}]" prop="role_status">
          <el-radio-group v-model="ruleForm.role_status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2"> 禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否存在互斥" prop="repel">
          <el-radio-group v-model="ruleForm.repel">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0"> 否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import Table from "@/components/tableTemp/index.vue";
import Search from "@/components/search/index.vue";
import table from "../hooks/useTable";
import * as _ from "lodash";
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const tableHeader = ref([]);
const tableData = ref([]);
const tableBtnGroup = <any>[
  {
    name: "编辑",
    className: "editBtn",
    param: "edit",
    is: "role_editing_button",
  },
  {
    name: "查看权限",
    className: "editBtn",
    param: "auth",
    is: "role_authorization_button",
  },
  {
    name: "删除",
    className: "delBtn",
    param: "del",
    is: "role_deletion_button",
  },
];
const flag = ref(false);
const msgFlag = ref(false);
const title = ref("");
const dT = ref("add");
const editDialogVisible = ref(false);
const editDialogTitle = ref("新增角色");
const ruleForm = ref<any>({
  role_id: "",
  role_name: "",
  role_comment: "",
  role_status: "",
  repel: "",
});
const submitID = ref("");
const searchInfo = ref("");
const rowIndex = ref<any>({});
onBeforeMount(() => {
  gueryRole();
});

const gueryRole = async () => {
  const res = await table.getTable(DATACONTENT_ID.roleTableNId, [
    searchInfo.value,
    sessionStorage.getItem("User_Id"),
  ]);
  tableHeader.value = res.tableHeader.value;
  tableData.value = res.tableData.value;
  submitID.value = res.msgId.value;
};

const search = (val) => {
  searchInfo.value = val;
  gueryRole();
};
const clear = () => {
  searchInfo.value = "";
  gueryRole();
};
const btnClick = (index, row, param) => {
  rowIndex.value = _.cloneDeep(row);
  if (param == "del") {
    flag.value = true;
    title.value = row.role_name;
  } else if (param == "edit") {
    msgFlag.value = true;
    dT.value = "edit";
    editDialogVisible.value = true;
    editDialogTitle.value = "编辑角色";
    ruleForm.value = _.cloneDeep(row);
  } else {
    router.push({
      path: "/userManagement/role/auth",
      query: {
        role_id: row.role_id,
      },
    });
  }
};
const delRest = () => {
  flag.value = false;
};
const remove = async () => {
  rowIndex.value.operator_id = sessionStorage.getItem("User_Id");
  if (rowIndex.value.AuthCount != undefined) {
    delete rowIndex.value.AuthCount;
  }
  //UserCount
  if (rowIndex.value.UserCount != undefined) {
    delete rowIndex.value.UserCount;
  }
  saveRole(3, rowIndex.value);
  flag.value = false;
};
const addApp = () => {
  editDialogVisible.value = true;
  editDialogTitle.value = "新增角色";
  dT.value = "add";
  msgFlag.value = false;
  ruleForm.value = {};
};
// 新增/编辑角色
const saveRole = async (event, data) => {
  try {
    const { code, message } = await table.dataChange(
      submitID.value,
      event,
      data
    );
    if (code == 0) {
      ElMessage.success(message);
      gueryRole();
    } else {
      ElMessage.error(message);
    }
  } catch (error) {}
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (dT.value == "add") {
        ruleForm.value.operator_id = sessionStorage.getItem("User_Id");
        saveRole(1, ruleForm.value);
      } else {
        ruleForm.value.operator_id = sessionStorage.getItem("User_Id");
        saveRole(2, ruleForm.value);
      }
      editDialogVisible.value = false;
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  editDialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.application {
  &-content {
    margin-top: 24px;
    height: calc(100% - 56px);
  }
}
</style>