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

<template>
  <div class="application account scroll-y">
    <div class="application-head flex">
      <div class="manageTitle">账号管理</div>
      <div class="flex-wrap">
        <Search @clear="clear" @search="search" />
        <el-button v-permission="['add_account_button']" size="default" @click="addApp" plain>新增</el-button>
      </div>
    </div>
    <div class="application-content flex">
      <div class="box account-tree">
        <el-tree :data="data" :props="defaultProps" node-key="user_group_id" default-expand-all :expand-on-click-node="false" @node-click="handleNodeClick" />
      </div>
      <Table class="account-table" btnGroupWidth="250px" :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="账号名称" :rules="[{required: true,message: '请输入账号名称',trigger: 'blur',}]" prop="user_name">
          <el-input :disabled="dT == 'edit'" v-model="ruleForm.user_name" size="default" placeholder="请输入账号名称" />
        </el-form-item>
        <el-form-item label="账号密码" :rules="[{required: true,message: '请输入账号密码',trigger: 'blur',}]" prop="user_pwd">
          <el-input v-model="ruleForm.user_pwd" type="password" show-password size="default" placeholder="请输入账号密码" />
        </el-form-item>
        <el-form-item label="账号组关联" prop="user_gropu_id">
          <el-select size="default" style="width: 100%" v-model="ruleForm.user_group_id" placeholder="请选择">
            <el-option v-for="item in options" :key="item.v" :label="item.k" :value="item.v"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号描述" prop="user_comment">
          <el-input v-model="ruleForm.user_comment" size="default" type="textarea" :rows="3" placeholder="请输入账号描述" />
        </el-form-item>
        <el-form-item label="是否启用" :rules="[{required: true,message: '请选择是否启用',trigger: 'change',}]" prop="user_status">
          <el-radio-group v-model="ruleForm.user_status">
            <el-radio :label="ruleForm.user_status != '0' && ruleForm.user_status == '1' ? '1' : '2'">启用</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, reactive, 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 Dialog from "@/components/dialog/index.vue";
import { translateDataToTreeAll } from "@/utils/validate";
import { GeneralDataReception, Query } from "@/api/webApi";
import * as _ from "lodash";
import MD5 from "blueimp-md5";
import table from "../hooks/useTable";
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const tableHeader = ref<any>([]);
const tableData = ref<any>([]);
const tableBtnGroup = <any>[
  {
    name: "编辑",
    className: "editBtn",
    param: "edit",
    is: "account_editing_button",
  },
  {
    name: "查看权限",
    className: "editBtn",
    param: "auth",
    is: "account_authorization_button",
  },
  {
    name: "删除",
    className: "delBtn",
    param: "del",
    is: "account_deletion_button",
  },
];
const flag = ref(false);
const title = ref("");
const dT = ref("add");
const editDialogVisible = ref(false);
const editDialogTitle = ref("新增账号");
const ruleForm = ref<any>({
  user_name: "",
  user_comment: "",
  user_status: "",
  user_pwd: "",
  user_group_id: "",
});
const rowIndex = ref<any>({});
const data = ref<any>([]);
const options = ref<any>([]);
const msgId = ref(null);
const msgType = ref("all");
const PageIndex = ref(1);
const searchInfo = ref("");
const pwdInfo = ref(null);
const submitID = ref<any>("");
//获取用户组
const getGroup = async () => {
  const { code, returnData } = await Query({
    id: DATACONTENT_ID.accountGroupTableId,
    dataContent: [""],
  });
  if (code == 0 && returnData.listValues) {
    const dataObj = {
      user_group_id: -1,
      up_user_group_id: -2,
      user_group_name: "全部用户组",
      children: translateDataToTreeAll(
        returnData.listValues,
        "up_user_group_id",
        "user_group_id"
      ),
    };
    data.value = [dataObj];
  } else {
    const dataObj = {
      user_group_id: -1,
      up_user_group_id: -2,
      user_group_name: "全部用户组",
      children: [],
    };
    data.value = [dataObj];
  }
};

//获取table
const accountList = async (type?: string) => {
  let result: any = null;
  if (msgType.value == "all") {
    result = await Query({
      id: DATACONTENT_ID.accountTableId,
      needPage: PageIndex.value,
      dataContent: [searchInfo.value],
    });
  } else {
    result = await Query({
      id:
        type == "tree"
          ? DATACONTENT_ID.accountGroupDetailsId
          : DATACONTENT_ID.accountTableId,
      dataContent: type == "tree" ? [msgId.value] : [searchInfo.value],
      needPage: PageIndex.value,
    });
  }
  const { code, returnData, message } = result;
  if (code == 0) {
    const { columnSet, listValues } = returnData;
    tableHeader.value = columnSet.map((column) => ({
      ...column,
      formatter:
        column.columnName === "user_status"
          ? function (row, column, cellValue, index) {
              return ["1", "2"].includes(String(cellValue)) ? "启用" : "禁用";
            }
          : undefined,
    }));
    tableData.value = listValues;
    submitID.value = returnData.submitID;
  } else {
    ElMessage.error(message);
  }
};

// 回到第一页
const pageInit = () => {
  PageIndex.value = 1;
  tableHeader.value = [];
  tableData.value = [];
  accountList();
};

const btnAuthMap = [
  ,
  "add_account_button",
  "account_editing_button",
  "account_deletion_button",
];
//增删改
const dataChange = async (event, data) => {
  const { code, message } = await table.dataChange(
    submitID.value,
    event,
    {
      ...data,
      user_status: data.user_status != 0 ? 2 : 0,
    },
    btnAuthMap[event]
  );
  if (code == 0) {
    ElMessage.success(message);
    pageInit();
  } else {
    ElMessage.error(message);
  }
};

//获取账号组
const getGroupSelect = async () => {
  const res = await Query({
    id: DATACONTENT_ID.accountGroupSelId,
    dataContent: [],
  });
  if (res.code == 0) {
    const { listValues } = res.returnData;
    options.value = listValues;
  } else {
    ElMessage.error(res.message);
  }
};

onBeforeMount(() => {
  getGroup();
  accountList();
  getGroupSelect();
});

const handleNodeClick = (data) => {
  tableHeader.value = [];
  tableData.value = [];
  if (data.user_group_id != -1 && data.up_user_group_id != -2) {
    PageIndex.value = 1;
    msgType.value = "cld";
    msgId.value = data.user_group_id;
    accountList("tree");
  } else {
    msgType.value = "all";
    clear();
  }
};

const defaultProps = {
  children: "children",
  label: "user_group_name",
};
const search = (val) => {
  searchInfo.value = val;
  pageInit();
};
const clear = () => {
  searchInfo.value = "";
  pageInit();
};
const btnClick = (index, row, param) => {
  rowIndex.value = row;
  if (param == "del") {
    flag.value = true;
    title.value = row.user_name;
  } else if (param == "edit") {
    dT.value = "edit";
    editDialogVisible.value = true;
    pwdInfo.value = row.user_pwd;
    editDialogTitle.value = "编辑账号";
    ruleForm.value = _.cloneDeep(row);
    console.log(ruleForm.value);
  } else {
    router.push({
      path: "/userManagement/account/accountAuth",
      query: {
        id: row.user_id,
      },
    });
  }
};
const delRest = () => {
  flag.value = false;
};
const remove = () => {
  if (rowIndex.value.AuthCount != undefined) {
    delete rowIndex.value.AuthCount;
  }
  dataChange(3, rowIndex.value);
  flag.value = false;
};
const addApp = () => {
  editDialogVisible.value = true;
  editDialogTitle.value = "新增账号";
  dT.value = "add";
  ruleForm.value = {};
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (dT.value == "add") {
        ruleForm.value.user_pwd = MD5(ruleForm.value.user_pwd);
        dataChange(1, ruleForm.value);
      } else {
        if (ruleForm.value.user_pwd === pwdInfo.value) {
          dataChange(2, ruleForm.value);
        } else {
          ruleForm.value.user_pwd = MD5(ruleForm.value.user_pwd);
          dataChange(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);
  }
}
.account {
  &-tree {
    width: 488px;
    margin-right: 24px;
  }
  &-table {
    flex: 1;
  }
}
</style>