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 conditon = ref("");
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];
  }
};
const gueryRoles = async () => {
  const res = await table.getTable(DATACONTENT_ID.allId, [
    sessionStorage.getItem("auth-id"),
    sessionStorage.getItem("User_Id"),
  ]);
  conditon.value = res.tableData.value[0].query_col_conditon;
  accountList();
};
//获取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;
    let arr = columnSet.map((column) => ({
      ...column,
      formatter:
        column.columnName === "user_status"
          ? function (row, column, cellValue, index) {
              return ["1", "2"].includes(String(cellValue)) ? "启用" : "禁用";
            }
          : undefined,
    }));
    if (conditon.value == null) {
      tableHeader.value = arr;
    } else {
      tableHeader.value = [];
      conditon.value.split(",").forEach((element) => {
        arr.forEach((res) => {
          if (element === res.columnName) {
            tableHeader.value.push(res);
          }
        });
      });
    }
    tableData.value = listValues;
    submitID.value = returnData.submitID;
  } else {
    ElMessage.error(message);
  }
};

// 回到第一页
const pageInit = () => {
  PageIndex.value = 1;
  tableHeader.value = [];
  tableData.value = [];
  gueryRoles();
  // 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();
  gueryRoles();
  // 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;
    gueryRoles();
    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>