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 { useUserStore } from "@/store/user";
import * as _ from "lodash";
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const tableHeader = ref([]);
const tableData = ref([]);
const conditonLisy = ref<any>([]);
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 conditon = ref("");
const searchInfo = ref("");
const rowIndex = ref<any>({});
onBeforeMount(() => {
  gueryRoles();
});

const gueryRoles = async () => {
  const route = router.currentRoute;
  const authMap = useUserStore().authMap;
  const role = route.value.meta?.roles?.[0];
  const res = await table.getTable(DATACONTENT_ID.allId, [
    authMap[role],
    sessionStorage.getItem("User_Id"),
  ]);
  conditon.value = res.tableData.value[0].query_col_conditon;
  conditonLisy.value = res.tableData.value[0].query_row_condition
    ? JSON.parse(res.tableData.value[0].query_row_condition)
    : null;
  gueryRole();
};
const gueryRole = async () => {
  const res = await table.getTable(DATACONTENT_ID.roleTableNId, [
    searchInfo.value,
    sessionStorage.getItem("User_Id"),
  ]);
  tableData.value = [];
  if (conditonLisy.value == null) {
    tableData.value = res.tableData.value;
  } else {
    let art = [];
    let arts = [];
    let art2 = [];
    let art3 = [];
    conditonLisy.value.forEach((element) => {
      if (element.conn == "%") {
        res.tableData.value.forEach((res) => {
          if (res[element.key].includes(element.val)) {
            art.push(res);
          }
        });
      }
      if (element.conn == "=") {
        if (art.length == 0) {
          art = res.tableData.value;
        }
        art.forEach((res) => {
          if (res[element.key] == element.val) {
            arts.push(res);
          }
        });
      }
      setTimeout(() => {
        if (element.conn == ">") {
          if (arts.length == 0) {
            arts = res.tableData.value;
          }
          arts.forEach((res) => {
            if (Number(res[element.key]) - Number(element.val) > 0) {
              art2.push(res);
            }
          });
        }
      });
      setTimeout(() => {
        if (element.conn == "<") {
          if (art2.length == 0) {
            art2 = res.tableData.value;
          }
          art2.forEach((res) => {
            if (Number(res[element.key]) - Number(element.val) < 0) {
              art3.push(res);
            }
          });
        }
        tableData.value = art3.length > 0 ? art3 : art2;
      });
    });
  }
  submitID.value = res.msgId.value;
  if (conditon.value == null) {
    tableHeader.value = res.tableHeader.value;
  } else {
    tableHeader.value = [];
    conditon.value.split(",").forEach((element) => {
      res.tableHeader.value.forEach((res) => {
        if (element === res.columnName) {
          tableHeader.value.push(res);
        }
      });
    });
  }
};

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 btnAuthMap = [
  ,
  "new_role_button",
  "role_editing_button",
  "role_deletion_button",
];
// 新增/编辑/删除角色
const saveRole = async (event, data) => {
  try {
    const { code, message } = await table.dataChange(
      submitID.value,
      event,
      data,
      btnAuthMap[event]
    );
    if (code == 0) {
      ElMessage.success(`操作成功`);
      gueryRole();
    } else {
      ElMessage.error(`操作失败`);
    }
  } 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>