templateDemo/src/views/systemSettings/queryTemplate/index.vue

<template>
  <div class="airportInfo scroll-y">
    <div class="wrap">
      <Minheader
        :is-auth="true"
        :is-statuser="true"
        :is-Search="true"
        @addForm="addForm"
        @searchForms="searchForms"
        @clearForm="clearForm"
      >
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">查询模板</div>
          </div>
        </template></Minheader
      >
      <div class="app-containers">
        <DataTable
          :btnGroupWidth="width"
          :tableHeader="tableCols"
          :tableData="tableData"
          :tableBtnGroup="tableBtnGroup"
          :tableProperty="{ rowKey: 'ID' }"
          @btnClick="btnClick"
        />
      </div>
      <Dialog
        :flag="flag"
        :type="type"
        :msgTitle="msgTitle"
        @resetForm="resetForm"
        @delRest="delRest"
        @submitForm="submitForm"
        @delRemove="delRemove"
      >
      </Dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import DataTable from "@/components/tableTemp/index.vue";
import Minheader from "@/components/minheader/index.vue";
import Dialog from "@/components/dialog/index.vue";
import { Query, GeneralDataReception } from "@/api/webApi";
import { ElMessage } from "element-plus";
import { el } from "element-plus/es/locale";
const width = ref("200px");
const router = useRouter();
const dataId = ref<String>("4"); //请求id
const page = ref<number>(0); //分页参数
const dataContent = ref<object>({});
const noMore = ref<Boolean>(false);
const rowTitle = ref<String>("");
const tableCols = ref([]); //表头数据
const serviceId = ref<String>("");
const tableObj = ref({}); //增删改数据缓存
const flag = ref<Boolean>(false); //弹窗开关
const type = ref<String>(""); //判断是否删除
const msgTitle = ref<String>("新增查询模板"); //弹窗标题
const tableColsCopys = reactive<Object>({}); //弹窗
const tableOptionser = ref<Array>([]); //弹窗下拉
const tableForm = reactive({
  queryConditionType: "",
  queryTemplateID: "",
  queryTemplateName: "",
  queryTemplateDescribe: "",
  dataSourceName: "",
  queryTemplate: "",
  serviceName: "",
  pageRows: "",
  event: "",
}); //弹窗内容
//列表
const tableData = ref([]);
const tableDatcopy = ref([]);
//表头
const state = reactive({
  list: [
    { label: "查询模板名称", key: "name" },
    { label: "查询模板协议", key: "china" },
    { label: "查询模板描述", key: "englin" },
  ],
  listLoading: true,
});
const tableBtnGroup = ref([
  {
    name: "编辑",
    className: "editBtn",
    param: 2,
  },
  {
    name: "列设置",
    className: "editBtn",
    param: 4,
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
  },
]);
//新增
const addForm = () => {
  router.push({ path: "/systemSettings/queryTemplateAdd" });
  // msgTitle.value = "新增查询模板";
  // flag.value = true;
  // type.value = "";
};
//取消
const resetForm = () => {
  flag.value = false;
  tableForm.name = "";
  tableForm.china = "";
  tableForm.englin = "";
  tableForm.two = "";
  tableForm.three = "";
  tableForm.text = "";
};
//编辑
// const editDialog = (data) => {
//   msgTitle.value = "编辑航司信息维护";
//   flag.value = true;
//   type.value = "";
//   tableForm.name = data.name;
//   tableForm.china = data.china;
//   tableForm.englin = data.englin;
//   tableForm.two = data.two;
//   tableForm.three = data.three;
//   tableForm.text = data.text;
// };
//编辑-删除
const btnClick = (row, index, param) => {
  if (param === 2) {
    router.push({
      path: "/systemSettings/queryTemplateEdit",
      query: {
        queryTemplateID: index.queryTemplateID,
      },
    });
  } else if (param === 3) {
    msgTitle.value = "删除查询模板";
    flag.value = true;
    type.value = "del";
    tableForm.event = 3;
    tableForm.queryConditionType = index.queryConditionType;
    tableForm.queryTemplateID = index.queryTemplateID;
    tableForm.queryTemplateName = index.queryTemplateName;
    tableForm.queryTemplateDescribe = index.queryTemplateDescribe;
    tableForm.dataSourceName = index.dataSourceName;
    tableForm.queryTemplate = index.queryTemplate;
    tableForm.serviceName = index.serviceName;
    tableForm.pageRows = index.pageRows;
  } else if (param === 4) {
    router.push({
      path: "/systemSettings/queryTemplateColumn",
      query: {
        queryTemplateID: index.queryTemplateID,
      },
    });
  }
};
//删除
const eleDialog = () => {
  msgTitle.value = "删除查询模板";
  flag.value = true;
  type.value = "del";
};
const delRemove = () => {
  tableForm.event = 3;
  generalDataReception(tableForm);
};
//删除
const delRest = () => {
  flag.value = false;
};
//获取表格数据
const getQuery = async () => {
  try {
    const { code, returnData } = await Query({
      id: dataId.value,
      needPage: ++page.value,
      dataContent: Object.values(dataContent.value),
    });
    if (code === "0") {
      if (returnData.listValues.length === 0) {
        page.value--;
        noMore.value = true;
      }
      const titleColumn = returnData.columnSet.find(
        (item) => item.needShow === 1
      );
      if (titleColumn) {
        rowTitle.value = titleColumn.columnName;
      }
      tableData.value.push(...returnData.listValues);
      tableDatcopy.value.push(...returnData.listValues);
      tableCols.value = returnData.columnSet;
      tableCols.value.forEach((element) => {
        element.label = element.columnLabel;
        element.key = element.columnName;
        // if (element.columnName === "queryTemplate") {
        //   element.width = "300px";
        // }
      });
      serviceId.value = returnData.submitID;
    } else {
      page.value--;
    }
  } catch (error) {
    page.value--;
  }
};
//确认提交
const submitForm = () => {
  generalDataReception(tableForm);
};
const resetTable = () => {
  page.value = 0;
  noMore.value = false;
  tableData.value = [];
};
//新增-编辑-删除
const generalDataReception = async (data) => {
  try {
    data = {
      ...data,
    };
    const { code } = await GeneralDataReception({
      serviceId: serviceId.value,
      dataContent: JSON.stringify(data),
    });
    if (code === "0") {
      ElMessage.success(`操作成功`);
      // this.$message.success("操作成功");
      resetTable();
      getQuery();
      resetForm();
      flag.value = false;
      // rmFlag.value = false;
      tableObj.value = {};
      // this.$router.go(0);
    } else {
      ElMessage.error(`操作失败`);
      // this.$message.error("操作失败");
      // this.flag = false;
      // this.rmFlag = false;
      tableObj.value = {};
      resetForm();
    }
  } catch (error) {
    flag.value = false;
    //  rmFlag.value = false;
    tableObj.value = {};
    resetForm();
  }
};
//搜索
const searchForms = (data) => {
  if (data) {
    tableData.value = [];
    tableDatcopy.value.forEach((element) => {
      if (element.queryTemplateID == data) {
        tableData.value.push(element);
      }
    });
  } else {
    tableData.value = [];
    tableDatcopy.value = [];
    page.value = 0;
    getQuery();
  }
};
//清除
const clearForm = () => {
  tableData.value = [];
  tableDatcopy.value = [];
  page.value = 0;
  getQuery();
};
onMounted(() => {
  getQuery();
});
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 100px;
}
.app-containers {
  height: calc(100vh - 180px);
}
</style>