账号组管理

src/views/userManagement/accountGroup/index.vue

@@ -15,11 +15,11 @@
     <!--新增/编辑-->
     <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 label="账号组名称" prop="user_group_name">
+          <el-input v-model="ruleForm.user_group_name" 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 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>
@@ -27,29 +27,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onBeforeMount } from "vue";
 import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { GeneralDataReception, Query } from "@/api/dataIntegration";
 import Table from "@/components/tableTemp/index.vue";
 import Search from "@/components/search/index.vue";
+import * as _ from "lodash";
+interface msgObj {
+  user_group_name: string;
+  user_group_comment: string | undefined;
+  event?: number;
+}
 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 tableHeader = ref([]);
+const tableData = ref([]);
 const tableBtnGroup = [
   {
     name: "编辑",
@@ -64,73 +55,109 @@ const tableBtnGroup = [
 ];
 const flag = ref(false);
 const title = ref("");
+const searchInfo = ref("");
 const dT = ref("add");
 const editDialogVisible = ref(false);
 const editDialogTitle = ref("新增账号组");
-const ruleForm = reactive({
-  appName: "",
-  appDesc: "",
-  appId: "",
+const ruleForm = ref({
+  user_group_name: "",
+  user_group_comment: "",
+});
+const rowIndex = ref({});
+
+onBeforeMount(() => {
+  accountList();
 });
-const rowIndex = ref(1);
+
+//获取账号组数据
+const accountList = async () => {
+  try {
+    const { code, returnData, message } = await Query({
+      id: DATACONTENT_ID.accountGroupTableId,
+      needPage: 1,
+      dataContent: [searchInfo.value],
+    });
+    if (code == 0 && returnData) {
+      const { columnSet, listValues } = returnData;
+      tableHeader.value = columnSet;
+      tableData.value = listValues;
+    } else {
+      ElMessage.error(message);
+    }
+  } catch (err: any) {}
+};
+
 const search = (val) => {
-  ElMessage.success(`搜索成功：${val}`);
+  searchInfo.value = val;
+  accountList();
 };
 const clear = () => {
-  ElMessage.success(`清除`);
+  searchInfo.value = "";
+  accountList();
 };
 const btnClick = (index, row, param) => {
-  rowIndex.value = index;
   if (param == "del") {
     flag.value = true;
-    title.value = row.appName;
+    title.value = row.user_group_name;
   } else {
     dT.value = "edit";
     editDialogVisible.value = true;
     editDialogTitle.value = "编辑账号组";
-    ruleForm.appDesc = row.appDesc;
-    ruleForm.appName = row.appName;
-    ruleForm.appId = row.appId;
+    ruleForm.value = _.cloneDeep(row);
+    rowIndex.value = _.cloneDeep(row);
   }
 };
 const delRest = () => {
   flag.value = false;
 };
-const remove = () => {
-  tableData.value.splice(rowIndex.value, 1);
-  ElMessage.success("删除成功");
+const remove = async () => {
+  try {
+    ruleForm.value.event = 3;
+    const { code, message } = await GeneralDataReception({
+      serviceId: SERVICE_ID.accountGroupScId,
+      dataContent: JSON.stringify(rowIndex.value),
+    });
+    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.appDesc = "";
-  ruleForm.appName = "";
-  ruleForm.appId = "";
+  ruleForm.value = {};
+};
+// 新增账号
+const saveAddAccount = async () => {
+  try {
+    const { code, message } = await GeneralDataReception({
+      serviceId: SERVICE_ID.accountGroupScId,
+      dataContent: JSON.stringify(ruleForm.value),
+    });
+    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") {
-        const len = tableData.value.length;
-        tableData.value.push({
-          id: len + 1,
-          appName: ruleForm.appName,
-          appDesc: ruleForm.appDesc,
-          appId: ruleForm.appId,
-        });
-        ElMessage.success("新增成功");
+        ruleForm.value.event = 1;
       } else {
-        tableData.value[rowIndex.value] = {
-          id: tableData.value[rowIndex.value].id,
-          appName: ruleForm.appName,
-          appDesc: ruleForm.appDesc,
-          appId: ruleForm.appId,
-        };
-        ElMessage.success("编辑成功");
+        ruleForm.value = rowIndex.value;
+        ruleForm.value.event = 2;
       }
+      saveAddAccount();
       editDialogVisible.value = false;
     } else {
       console.log("error submit!", fields);