SZYGM1.0/src/views/userManagement/accountGroup/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" />
        <el-button v-permission="['add_account_group_button']" size="default" @click="addApp" plain>新增</el-button>
      </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="账号组名称" :rules="[{required: true,message: '请输入账号组名称',trigger: 'blur',}]" prop="user_group_name">
          <el-input v-model="ruleForm.user_group_name" size="default" placeholder="请输入账号组名称" />
        </el-form-item>
        <el-form-item label="账号组描述" prop="user_group_comment">
          <el-input v-model="ruleForm.user_group_comment" size="default" type="textarea" :rows="3" placeholder="请输入账号组描述" />
        </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 * as _ from "lodash";
import table from "../hooks/useTable";
const ruleFormRef = ref<FormInstance>();
const tableHeader = ref<any>([]);
const tableData = ref<any>([]);
const tableBtnGroup = <any>[
  {
    name: "编辑",
    className: "editBtn",
    param: "edit",
    is: "account_group_editing_button",
  },
  {
    name: "删除",
    className: "delBtn",
    param: "del",
    is: "account_group_deletion_button",
  },
];
const flag = ref(false);
const title = ref("");
const searchInfo = ref("");
const dT = ref("add");
const submitID = ref(0);
const editDialogVisible = ref(false);
const editDialogTitle = ref("新增账号组");
const ruleForm = ref<any>({
  user_group_name: "",
  user_group_comment: "",
});
const rowIndex = ref<any>({});

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

//获取账号组数据
const accountList = async () => {
  const res = await table.getTable(DATACONTENT_ID.accountGroupTableId, [
    searchInfo.value,
  ]);
  tableHeader.value = res.tableHeader.value;
  tableData.value = res.tableData.value;
  submitID.value = res.msgId.value;
};

const search = (val) => {
  searchInfo.value = val;
  accountList();
};
const clear = () => {
  searchInfo.value = "";
  accountList();
};
const btnClick = (index, row, param) => {
  rowIndex.value = _.cloneDeep(row);
  if (param == "del") {
    flag.value = true;
    title.value = row.user_group_name;
  } else {
    dT.value = "edit";
    editDialogVisible.value = true;
    editDialogTitle.value = "编辑账号组";
    ruleForm.value = _.cloneDeep(row);
  }
};
const delRest = () => {
  flag.value = false;
};
const remove = async () => {
  if (rowIndex.value.user_count != undefined) {
    delete rowIndex.value.user_count;
  }
  try {
    const { code, message } = await table.dataChange(
      submitID.value,
      3,
      rowIndex.value,
      "account_group_deletion_button"
    );

    if (code == 0) {
      ElMessage.success(message);
      accountList();
    } else {
      ElMessage.error(message);
    }
  } catch (err: any) {}
  flag.value = false;
};
const addApp = () => {
  editDialogVisible.value = true;
  editDialogTitle.value = "新增账号组";
  dT.value = "add";
  ruleForm.value = {};
};
// 新增/编辑账号
const saveAddAccount = async (event) => {
  try {
    const { code, message } = await table.dataChange(
      submitID.value,
      event,
      ruleForm.value,
      event == 1 ? "add_account_group_button" : "account_group_editing_button"
    );
    if (code == 0) {
      ElMessage.success(message);
      accountList();
    } 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") {
        saveAddAccount(1);
      } else {
        // ruleForm.value = rowIndex.value;
        saveAddAccount(2);
      }
      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>