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

<template>
  <div class="application scroll-y">
    <div class="application-head flex">
      <div class="manageTitle">应用管理</div>
      <div>
        <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="app_name">
          <el-input v-model="ruleForm.app_name" size="default" placeholder="请输入应用名称" />
        </el-form-item>
        <el-form-item label="appid" prop="app_show_id">
          <el-input v-model="ruleForm.app_show_id" size="default" placeholder="请输入appid" />
        </el-form-item>
        <el-form-item label="应用描述" prop="app_comment">
          <el-input v-model="ruleForm.app_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 * as _ from "lodash";
import table from "../hooks/useTable";
const ruleFormRef = ref<FormInstance>();
const tableHeader = ref<any>([]);
const tableData = ref<any>([]);
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 = ref<any>({
  app_name: "",
  app_comment: "",
  app_show_id: "",
});
const rowIndex = ref(1);
const searchInfo = ref("");

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

const getApp = async () => {
  const res = await table.getTable(DATACONTENT_ID.appTableId, [
    searchInfo.value,
  ]);
  tableHeader.value = res.tableHeader.value;
  tableData.value = res.tableData.value;
};

const btnClick = (index, row, param) => {
  rowIndex.value = _.cloneDeep(row);
  if (param == "del") {
    flag.value = true;
    title.value = row.app_name;
  } else {
    dT.value = "edit";
    editDialogVisible.value = true;
    editDialogTitle.value = "编辑应用";
    ruleForm.value = _.cloneDeep(row);
  }
};
const delRest = () => {
  flag.value = false;
};
const remove = () => {
  dataChange(3, rowIndex.value);
  flag.value = false;
};
const addApp = () => {
  editDialogVisible.value = true;
  editDialogTitle.value = "新增应用";
  dT.value = "add";
  ruleForm.value = {};
};

//增删改
const dataChange = async (event, data) => {
  const { code, message } = await table.dataChange(
    SERVICE_ID.appScId,
    event,
    data
  );
  if (code == 0) {
    ElMessage.success(message);
    getApp();
  } else {
    ElMessage.error(message);
  }
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (dT.value == "add") {
        dataChange(1, ruleForm.value);
      } else {
        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);
  }
}
</style>