SZYGM1.0/src/views/systemSettings/warningSet/index.vue

<template>
  <div class="airportInfo scroll-y">
    <div class="wrap">
      <Minheader :is-auth="true" :is-statuser="true" powerData="alert_alarm_settings_add_button" @addForm="addForm" @searchForms="searchForms">
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">预警告警维护</div>
          </div>
        </template>
      </Minheader>
      <div class="app-containers">
        <DataTable :tableHeader="tableCols" :tableData="tableData" :tableBtnGroup="tableBtnGroup" :tableProperty="{ rowKey: 'ID' }" @btnClick="btnClick" />
      </div>
      <Dialog width="600px" :flag="flag" :type="type" :msgTitle="msgTitle" :delName="delName" @resetForm="resetForm" @delRest="delRest" @submitForm="submitForm" @delRemove="delRemove">
        <div class="diacont">
          <el-form :model="tableForm" :rules="formRules" ref="warningSetForm">
            <el-row :gutter="24">
              <!-- <el-col :span="12">
                <el-form-item label="策略名称" size="default">
                  <el-input
                    v-model="tableForm.name"
                    placeholder="请输入策略名称"
                  />
                </el-form-item>
              </el-col> -->
              <el-col :span="12">
                <el-form-item label="名称" prop="alarmname" size="default">
                  <el-input v-model="tableForm.alarmname" placeholder="请输入名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="起飞机场" size="default" prop="departmentAirport" :rules="formRules.isNotNull">
                  <el-select style="width: 100%" v-model="tableForm.departmentAirport" class="input-shadow" filterable allow-create default-first-option clearable placeholder="请选择起飞机场">
                    <el-option v-for="item in tableOptionser" :key="item.airportID" :label="item.IATACode" :value="item.IATACode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="降落机场" size="default">
                  <el-select style="width: 100%" v-model="tableForm.landingAirport" class="input-shadow" filterable allow-create default-first-option clearable placeholder="请选择降落机场">
                    <el-option v-for="item in tableOptionser" :key="item.airportID" :label="item.IATACode" :value="item.IATACode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="航司二字码" size="default" prop="IATACode">
                  <el-select style="width: 100%" v-model="tableForm.IATACode" class="input-shadow" filterable allow-create default-first-option clearable placeholder="请选择航司二字码">
                    <el-option v-for="item in iaCodeArr" :key="item.airlineCompanyID" :label="item.ITATCode" :value="item.ITATCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="国内国际" size="default" prop="ditype" :rules="formRules.isNotNull">
                  <el-select style="width: 100%" v-model="tableForm.ditype" class="input-shadow" filterable allow-create default-first-option placeholder="请选择国内国际">
                    <el-option v-for="(item,index) in ditypeAll" :key="index" :label="item.k" :value="item.v">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="航班号" size="default">
                  <el-input v-model="tableForm.flightNo" placeholder="请输入航班号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="机型" prop="planetype" size="default">
                  <el-select style="width: 100%" v-model="tableForm.planetype" class="input-shadow" filterable allow-create default-first-option placeholder="请选择机型">
                    <el-option label="宽体机" value="宽体机" />
                    <el-option label="窄体机" value="窄体机" />
                    <el-option label="全部" value="全部" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客货机" prop="flighttype" size="default">
                  <el-select style="width: 100%" v-model="tableForm.flighttype" class="input-shadow" filterable allow-create default-first-option placeholder="请选择客货机">
                    <el-option label="客机" value="客机" />
                    <el-option label="货机" value="货机" />
                    <el-option label="全部" value="全部" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="停机位" prop="landingstand" size="default">
                  <el-input ref="inputRef" v-model="tableForm.landingstand" placeholder="请输入停机位" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生效时间" size="default" prop="startDate" :rules="formRules.isNotNull">
                  <el-date-picker v-model="tableForm.startDate" :rows="1" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="失效时间" size="default" prop="endDate">
                  <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="tableForm.endDate" :rows="1" type="date" placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="描述" prop="alarmdesc" size="default">
                  <el-input v-model="tableForm.alarmdesc" placeholder="请输入描述" />
                </el-form-item>
              </el-col>
              <!-- <el-col>
                <el-form-item label="备注" size="default">
                  <el-input
                    type="textarea"
                    v-model="tableForm.text"
                    placeholder="请输入备注"
                  />
                </el-form-item>
              </el-col> -->
            </el-row>
          </el-form>
        </div>
      </Dialog>
      <el-popover
        ref="popoverRef"
        :virtual-ref="inputRef"
        virtual-triggering
        placement="right"
        trigger="click"
        content="多个停机位用逗号分隔，例如 51,52"
      />
    </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,
  htQuery,
  dataToChange,
} from "@/api/webApi";
import { ElMessage } from "element-plus";
import { onMounted } from "vue";
const formRules = useElement().formRules;
const page = ref<number>(0); //分页参数
const dataContent = ref<object>({});
const noMore = ref<boolean>(false);
const rowTitle = ref<string>("");
const tableCols = ref<any>([]); //表头数据
const iaCodeArr = ref<any>([]); //航司二字码
const serviceId = ref<string | any>("");
const tableObj = ref({}); //增删改数据缓存
const router = useRouter();
const flag = ref<boolean>(false); //弹窗开关
const type = ref<string>(""); //判断是否删除
const msgTitle = ref<string>("新增告警预警维护"); //弹窗标题
const tableColsCopys = reactive<Object>({}); //弹窗\
const tableOptionser = ref<any>([]); //弹窗下拉
const submitID = ref<string | any>("");
const delName = ref<string>("");
const listqueryTemplateID = ref<string | any>("");
const inputRef = ref(null)
const tableForm = reactive<any>({
  IATACode: null,
  departmentAirport: null,
  landingAirport: null,
  flightNo: null,
  startDate: null,
  endDate: null,
  ditype: "ALL",
  planetype: null,
  flighttype: null,
  landingstand: null,
  alarmname: null,
  alarmdesc: null,
  // alarmSceneId: "",
  // event: "",
}); //弹窗内容
//列表
const tableData = ref<any>([]);
const ditypeAll = ref<any>([
  {
    k: "全部",
    v: "ALL",
  },
  {
    k: "国内",
    v: "DOM",
  },
  {
    k: "国际",
    v: "INT",
  },
]);
//表头
const state = reactive({
  list: [
    { label: "名称", key: "name" },
    { label: "中文简称", key: "china" },
    { label: "英文简称", key: "englin" },
    { label: "航司二字码", key: "two" },
    { label: "航司三字码", key: "three" },
    { label: "备注", key: "text" },
  ],
  listLoading: true,
});
const tableBtnGroup = ref([
  {
    name: "编辑",
    className: "editBtn",
    param: 2,
    is: "edit_alert_alarm_settings_button",
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
    is: "delete_alert_alarm_settings_button",
  },
]);
//获取弹框-下拉数据
const getSelectData = async (id: number, name?: string) => {
  const { code, returnData } = await Query({
    id,
    dataContent: name ? [name] : name === null ? [null] : [],
  });
  if (code == 0) {
    tableOptionser.value = returnData.listValues;
  } else {
    tableOptionser.value = [];
  }
};
//新增
const addForm = () => {
  msgTitle.value = "新增告警预警策略";
  flag.value = true;
  type.value = "";
  // tableForm.event = 1;
};
//取消
const resetForm = () => {
  flag.value = false;
  tableForm.IATACode = "";
  tableForm.departmentAirport = "";
  tableForm.landingAirport = "";
  tableForm.flightNo = "";
  tableForm.startDate = "";
  tableForm.endDate = "";
  tableForm.planetype = '',
  tableForm.flighttype = '',
  tableForm.landingstand = '',
  tableForm.alarmname = '',
  tableForm.alarmdesc = '',
  // tableForm.event = "";
  delName.value = "";
};
//编辑
// 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: "/BasicsData/warningEdit",
      query: {
        alarmSceneId: index.alarmSceneId,
        submitID: submitID.value,
        listqueryTemplateID: listqueryTemplateID.value,
      },
    });
  } else if (param === 3) {
    msgTitle.value = "删除告警预警维护";
    flag.value = true;
    type.value = "del";
    // tableForm.event = 3;
    delName.value = index.alarmname;
    tableForm.alarmSceneId = index.alarmSceneId;
    tableForm.IATACode = index.IATACode;
    tableForm.departmentAirport = index.departmentAirport;
    tableForm.landingAirport = index.landingAirport;
    tableForm.flightNo = index.flightNo;
    tableForm.startDate = index.startDate;
    tableForm.endDate = index.endDate;
  } else if (param === 4) {
  }
};
//删除
const eleDialog = () => {
  msgTitle.value = "删除告警预警维护";
  flag.value = true;
  type.value = "del";
};
const delRemove = () => {
  // tableForm.event = 3;
  generalDataReception(tableForm, 3);
};
//删除
const delRest = () => {
  flag.value = false;
};
//获取表格数据
const getQuery = async (data?) => {
  try {
    const columnSet = [
      {
        queryTemplateColumnSetID: 300,
        queryTemplateID: 13,
        columnName: "alarmname",
        columnLabel: "名称",
        columnDescribe: "名称",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "varchar",
        listqueryTemplateID: null,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 290,
        queryTemplateID: 13,
        columnName: "alarmStrategyID",
        columnLabel: "策略编号",
        columnDescribe: "策略编号",
        needSort: 0,
        needFilters: 1,
        needShow: 0,
        needGroup: 0,
        dataType: "int",
        listqueryTemplateID: null,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 291,
        queryTemplateID: 13,
        columnName: "IATACode",
        columnLabel: "航司二字码",
        columnDescribe: "航司二字码",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "varchar",
        listqueryTemplateID: null,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 292,
        queryTemplateID: 13,
        columnName: "flightNo",
        columnLabel: "航班号",
        columnDescribe: "航班号",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "int",
        listqueryTemplateID: 1803423,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 292,
        queryTemplateID: 13,
        columnName: "ditype",
        columnLabel: "国内国际",
        columnDescribe: "国内国际",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "int",
        listqueryTemplateID: 1803423,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 293,
        queryTemplateID: 13,
        columnName: "departmentAirport",
        columnLabel: "起飞机场",
        columnDescribe: "起飞机场",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "number",
        listqueryTemplateID: null,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 294,
        queryTemplateID: 13,
        columnName: "landingAirport",
        columnLabel: "降落机场",
        columnDescribe: "降落机场",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "number",
        listqueryTemplateID: null,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 297,
        queryTemplateID: 13,
        columnName: "planetype",
        columnLabel: "机型",
        columnDescribe: "宽体机/窄体机",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "varchar",
        listqueryTemplateID: null,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 299,
        queryTemplateID: 13,
        columnName: "flighttype",
        columnLabel: "客货机",
        columnDescribe: "客货机",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "varchar",
        listqueryTemplateID: null,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 298,
        queryTemplateID: 13,
        columnName: "landingstand",
        columnLabel: "停机位",
        columnDescribe: "停机位",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "varchar",
        listqueryTemplateID: null,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 295,
        queryTemplateID: 13,
        columnName: "startDate",
        columnLabel: "生效时间",
        columnDescribe: "生效时间",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "varchar",
        listqueryTemplateID: 1803424,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 296,
        queryTemplateID: 13,
        columnName: "endDate",
        columnLabel: "失效时间",
        columnDescribe: "失效时间",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "varchar",
        listqueryTemplateID: 1803425,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
      {
        queryTemplateColumnSetID: 301,
        queryTemplateID: 13,
        columnName: "alarmdesc",
        columnLabel: "描述",
        columnDescribe: "描述",
        needSort: 0,
        needFilters: 1,
        needShow: 1,
        needGroup: 0,
        dataType: "varchar",
        listqueryTemplateID: null,
        needCount: null,
        orderNumber: null,
        needSearch: null,
      },
    ];
    const { code, returnData } = await Query({
      id: DATACONTENT_ID.sysServiceCjId,
      needPage: ++page.value,
      dataContent: data ? [data] : [],
    });
    if (code === "0") {
      // console.log(returnData);
      if (returnData.length === 0) {
        page.value--;
        noMore.value = true;
      }
      tableData.value.push(...returnData);
      tableCols.value = columnSet;
      // console.log(tableData);
      // const titleColumn = returnData.columnSet.find(
      //   (item) => item.needShow === 1
      // );
      // if (titleColumn) {
      //   rowTitle.value = titleColumn.columnName;
      // }
      // submitID.value = returnData.submitID;
      // tableData.value.push(...returnData);
      // console.log(tableData);
      // tableCols.value = returnData.columnSet;
      // returnData.columnSet.forEach((item) => {
      //   if (item.listqueryTemplateID && item.columnName === "landingAirport") {
      //     listqueryTemplateID.value = item.listqueryTemplateID;
      //     // getSelectData(item.listqueryTemplateID);
      //   }
      // });
      // tableCols.value.forEach((element) => {
      //   element.label = element.columnLabel;
      //   element.key = element.columnName;
      // });
      serviceId.value = DATACONTENT_ID.sysServiceCjIds;
    } else {
      tableCols.value = columnSet;
      page.value--;
    }
  } catch (error) {
    page.value--;
  }
};
//确认提交
const warningSetForm: any = ref(null);
const submitForm = () => {
  warningSetForm.value.validate((valid: any) => {
    if (valid) {
      generalDataReception(tableForm, 1);
    } else {
      return false;
    }
  });
};
const resetTable = () => {
  page.value = 0;
  noMore.value = false;
  tableData.value = [];
};
//新增-编辑-删除
const generalDataReception = async (data, event) => {
  try {
    if (event === 3) {
      data = {
        alarmSceneId: data.alarmSceneId
      }
    } else {
      data = {
        ...data,
      };
    }
    const { code } = await dataToChange(serviceId.value, data, event);
    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) => {
  page.value = 0;
  tableData.value = [];
  getQuery(data);
};
//获取航司二字码
const getIaCode = async () => {
  const result = await htQuery(DATACONTENT_ID.sysServiceHsId);
  iaCodeArr.value = result;
};
//获取机场
const getAirpot = async () => {
  const result = await htQuery(DATACONTENT_ID.sysServiceHzId);
  tableOptionser.value = result;
};
onMounted(() => {
  getIaCode();
  getAirpot();
});
// getQuery();
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 100px;
}
</style>