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 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="账号组名称" prop="appName">
          <el-input v-model="ruleForm.appName" size="default" placeholder="请输入账号组名称" />
        </el-form-item>
        <el-form-item label="账号组描述" prop="appDesc">
          <el-input v-model="ruleForm.appDesc" size="default" type="textarea" :rows="3" placeholder="请输入账号组描述" />
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import Table from "@/components/tableTemp/index.vue";
import Search from "@/components/search/index.vue";
const ruleFormRef = ref<FormInstance>();
const tableHeader = [
  { label: "账号组名称", key: "appName" },
  { label: "账号组描述", key: "appDesc" },
];
const tableData = ref([
  {
    id: 1,
    appName: "11",
    appId: "22",
    appDesc: "33",
  },
  {
    id: 2,
    appName: "11",
    appId: "22",
    appDesc: "33",
  },
]);
const tableBtnGroup = [
  {
    name: "编辑",
    className: "editBtn",
    param: "edit",
  },
  {
    name: "删除",
    className: "delBtn",
    param: "del",
  },
];
const flag = ref(false);
const title = ref("");
const dT = ref("add");
const editDialogVisible = ref(false);
const editDialogTitle = ref("新增账号组");
const ruleForm = reactive({
  appName: "",
  appDesc: "",
  appId: "",
});
const rowIndex = ref(1);
const search = (val) => {
  ElMessage.success(`搜索成功：${val}`);
};
const clear = () => {
  ElMessage.success(`清除`);
};
const btnClick = (index, row, param) => {
  rowIndex.value = index;
  if (param == "del") {
    flag.value = true;
    title.value = row.appName;
  } else {
    dT.value = "edit";
    editDialogVisible.value = true;
    editDialogTitle.value = "编辑账号组";
    ruleForm.appDesc = row.appDesc;
    ruleForm.appName = row.appName;
    ruleForm.appId = row.appId;
  }
};
const delRest = () => {
  flag.value = false;
};
const remove = () => {
  tableData.value.splice(rowIndex.value, 1);
  ElMessage.success("删除成功");
  flag.value = false;
};
const addApp = () => {
  editDialogVisible.value = true;
  editDialogTitle.value = "新增账号组";
  dT.value = "add";
  ruleForm.appDesc = "";
  ruleForm.appName = "";
  ruleForm.appId = "";
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (dT.value == "add") {
        const len = tableData.value.length;
        tableData.value.push({
          id: len + 1,
          appName: ruleForm.appName,
          appDesc: ruleForm.appDesc,
          appId: ruleForm.appId,
        });
        ElMessage.success("新增成功");
      } else {
        tableData.value[rowIndex.value] = {
          id: tableData.value[rowIndex.value].id,
          appName: ruleForm.appName,
          appDesc: ruleForm.appDesc,
          appId: ruleForm.appId,
        };
        ElMessage.success("编辑成功");
      }
      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>