modify

+import { debounce } from "@/utils";
+export default {
+  data() {
+    return {
+      ursaError: "", // URSA包含校验提示语
+      notUrsaError: "", // URSA不包含校验提示语
+      validateForm: true, // form表单节流阀
+    };
+  },
+  directives: {
+    // 处理加减天数
+    "input-filter": {
+      bind: function (el, binding, { context }) {
+        el.handler = function (event) {
+          context.calculateDay(event);
+        };
+        el.addEventListener("input", el.handler);
+      },
+      unbind: function (el) {
+        el.removeEventListener("input", el.handler);
+      },
+    },
+  },
+  methods: {
+    // 防抖函数处理加减天数校验
+    calculateDay: debounce(function (...args) {
+      // 判断有没有值
+      if (args.length) {
+        // 判断传过来的是不是一个对象
+        const { target } = args[0];
+        // 是不是一个数字
+        if (isNaN(Number(target.value))) {
+          this.msgError("请输入有效数字");
+          target.value = "";
+        } else {
+          // // 非数字时
+          // if (Number(target.value) < -7) {
+          //   this.msgError("加减天数最小不能大于7天");
+          //   target.value = "";
+          // } else if (Number(target.value) > 7) {
+          //   this.msgError("加减天数最大不能大于7天");
+          //   target.value = "";
+          // }
+          if (/[\.]/.test(Number(target.value))) {
+            // 浮点数时
+            this.msgError("加减天数只能为整数");
+            target.value = "";
+          }
+        }
+        target.dispatchEvent(new Event("input"));
+      }
+    }, 800),
+    // 获取字典
+    getObj({ serviceCode }) {
+      let service_Code = [];
+      serviceCode.map((item) => {
+        service_Code.push(item.chineseName);
+      });
+      this.serviceCodeData = service_Code;
+    },
+    // 处理serviceCode包不包含
+    serviceCodeCofig() {
+      let str = "";
+      if (this.isServiceCode == "1") {
+        str = this.queryForm.includeServiceType.replace(/;|；/g, ",");
+      } else {
+        str = this.queryForm.notIncludeServiceType.replace(/;|；/g, ",");
+      }
+      let arr = str.split(",");
+      if (arr[arr.length - 1] == "") {
+        arr.splice(arr.length - 1, 1);
+      }
+      let noHasCode = this.serviceCodeData.filter(
+        (v) => !arr.some((val) => val == v)
+      );
+      let hasCode = this.serviceCodeData.filter((v) =>
+        arr.some((val) => val == v)
+      );
+      let includeCode = arr.filter((v) => !hasCode.some((val) => val == v));
+      return {
+        include: hasCode,
+        noInclude: includeCode,
+      };
+    },
+    // radio包含不包含serviceCode
+    changeIsServiceCode(val) {
+      // 勾选的时候去校验 || 输入的时候去校验
+      if (val == 1) {
+        if (this.serviceCodeCofig().noInclude.length) {
+          let tip = this.serviceCodeCofig().noInclude.toString();
+          // this.msgError(`${tip} 不包含`);
+        }
+      } else {
+        if (this.serviceCodeCofig().include.length) {
+          let tip = this.serviceCodeCofig().include.toString();
+          // this.msgError(`${tip} 已包含`);
+        }
+      }
+    },
+    // serviceCode失焦事件
+    serviceCodeBlur() {
+      if (this.isServiceCode == "1") {
+        if (this.serviceCodeCofig().noInclude.length) {
+          let tip = this.serviceCodeCofig().noInclude.toString();
+          // this.msgError(`${tip} 不包含`);
+        }
+      } else {
+        if (this.serviceCodeCofig().include.length) {
+          let tip = this.serviceCodeCofig().include.toString();
+          // this.msgError(`${tip} 已包含`);
+        }
+      }
+    },
+    // Ursa校验 使用JavaScript写一个匹配字母的表达式
+    validateUrsa(ursaMark, ursa) {
+      // 分隔字符串并且转数组&去除数组空字符串
+      let ursaList = ursa.split(";").filter((str) => str !== "");
+      // 是否有重复的
+      let repeat = new Set(ursaList).size !== ursaList.length;
+      // 校验开头以字母或者数字开头下划线结尾的/^[a-zA-Z0-9]*_$/ 和 校验校验开头以字母或者数字开头的/^[a-zA-Z0-9]*$/
+      let inUrsa = ursaList.every((item) =>
+        ursaMark ? /^[a-zA-Z0-9]*_$/.test(item) : /^[a-zA-Z0-9]*$/.test(item)
+      );
+      const ursaInfo = {
+        ursaMark: ursaMark, // Boolean ursa包含/不包含
+        ursa: ursaList, // ursa
+        repeat: repeat, // Boolean 是否有重复的
+        inUrsa: inUrsa, // Boolean ursa校验
+      };
+      // ursa包含
+      if (ursaMark && ursaInfo.repeat) {
+        this.ursaError = "填写的URSA已重复";
+      }
+      if (ursaMark && !ursaInfo.inUrsa) {
+        this.ursaError = "URSA包含之间用分号分隔，例：P2_;P3_;P_";
+      }
+      if (ursaMark && !ursaInfo.repeat && ursaInfo.inUrsa) {
+        this.ursaError = "";
+      }
+      // ursa不包含;
+      if (!ursaMark && ursaInfo.repeat) {
+        this.notUrsaError = "填写的URSA已重复";
+      }
+      if (!ursaMark && !ursaInfo.inUrsa) {
+        this.notUrsaError = "URSA不包含之间用分号分隔，例：P2;P3;P";
+      }
+      if (!ursaMark && !ursaInfo.repeat && ursaInfo.inUrsa) {
+        this.notUrsaError = "";
+      }
+      // 两则都为空时则校验通过
+      if (
+        (this.ursaError && this.notUrsaError) ||
+        this.ursaError ||
+        this.notUrsaError
+      ) {
+        this.validateForm = false;
+      } else {
+        this.validateForm = true;
+      }
+    },
+    // 包含
+    includeUrsa() {
+      let { includeUrsa } = this.queryForm;
+      this.validateUrsa(true, includeUrsa);
+    },
+    // 不包含
+    notIncludeUrsa() {
+      let { notIncludeUrsa } = this.queryForm;
+      this.validateUrsa(false, notIncludeUrsa);
+    },
+  },
+};

+export const tableAttr = {
+  border: true,
+  loadingTable: false,
+  isDragSort: true, // 拖拽tableData数据一定要加id字段
+  maxHeight: 300,
+  btnCofig: {
+    isBtn: false,
+    btnGroup: [
+      {
+        type: "primary",
+        icon: "el-icon-plus",
+        btnName: "添加",
+        size: "mini",
+        round: false,
+        loading: false,
+        event: "add",
+      },
+    ],
+  },
+};

+export const formConfig = [
+  {
+    label: "原航班",
+    type: "Input",
+    name: "originOfFlightNo",
+    prop: "originOfFlightNo",
+    placeholder: "请输入原航班号",
+    span: 5,
+    trigger: "blur",
+    labelWidth: "55px",
+  },
+  {
+    label: "修改时间 从",
+    type: "Date",
+    name: "startTime",
+    prop: "startTime",
+    placeholder: "请选择开始时间",
+    // rules: { required: true, message: "请选择开始时间", trigger: "blur" },
+    format: "yyyy-MM-dd",
+    colWidth: "23%",
+    inputWidth: "100%",
+  },
+  {
+    label: "到",
+    type: "Date",
+    name: "endTime",
+    prop: "endTime",
+    placeholder: "请选择结束时间",
+    // rules: { required: true, message: "请选择结束时间", trigger: "blur" },
+    format: "yyyy-MM-dd",
+    colWidth: "20%",
+    labelWidth: "20px",
+    inputWidth: "100%",
+  },
+  {
+    label: "规则状态",
+    type: "Select",
+    name: "status",
+    prop: "status",
+    placeholder: "请选择状态",
+    options: {
+      data: [
+        {
+          value: "1",
+          label: "有效",
+        },
+        {
+          value: "0",
+          label: "无效",
+        },
+      ],
+    },
+    colWidth: "18%",
+    labelWidth: "70px",
+    inputWidth: "100%",
+  },
+];

+<template>
+  <div ref="formHeaderRef" class="form-header container">
+    <el-row>
+      <el-col>
+        <yl-form
+          ref="ruleForm"
+          :formConfig="formConfig"
+          :queryForm="queryForm"
+          :inline="false"
+          formWidth="auto"
+          @blur="blurEvent"
+        />
+      </el-col>
+    </el-row>
+    <yl-table
+      ref="ylTable"
+      :attrs="tableAttr"
+      :loadingTable="tableAttr.loadingTable"
+      :columns="columns"
+      :tableData="tableData"
+      :pageConfig="pageConfig"
+      @sizeChange="handleSizeChange"
+      @currentChange="handleCurrentChange"
+      @search="searchBtn"
+      @add="addBtn"
+    >
+    </yl-table>
+  </div>
+</template>
+<script>
+import YlForm from "@/components/YlForm";
+import YlTable from "@/components/YlTable";
+import { formConfig } from "./formConfig";
+import { tableAttr, columnHeader } from "./tableConfig";
+import { restTableHeight } from "@/utils";
+import {
+  findAllEtesRules, // ET86查询
+  deleteEtesRuleById, // 删除
+} from "@/api/et86";
+import store from "@/store";
+export default {
+  name: "Et86RuleConfig",
+  components: {
+    YlForm,
+    YlTable,
+  },
+  data() {
+    return {
+      formConfig: formConfig, // 表单配置项
+      queryForm: {
+        // 表单参数
+        status: "有效",
+      },
+      pageConfig: {
+        // 分页配置项
+        isPagination: true,
+        total: 0,
+        pageData: {
+          page: 1,
+          size: 10,
+        },
+      },
+      tableAttr: tableAttr, // table配置项
+      columns: columnHeader(
+        this.indexAdd,
+        this.viewRow,
+        this.editRow,
+        this.deleteRow
+      ), // 表头
+      tableData: [], // 表格数据
+    };
+  },
+  watch: {
+    $route(to, from) {
+      // 如果是从edit页面进入的Et86RuleConfig页面，那么删除Et86RuleConfig页面缓存
+      // store.dispatch("tagsView/delCachedView", to); // 删除当前路由组件Et86RuleConfig缓存
+      if (to.name == this.$options.name) {
+        this.searchBtn();
+      }
+    },
+  },
+  created() {
+    // ET86查询
+    this.$nextTick(() => {
+      this.searchBtn();
+    });
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // window视口的高减去除了Table表格的高；将这个差的结果值作为设置Table的高;
+      this.tableAttr.maxHeight =
+        window.innerHeight - restTableHeight(this.$refs);
+    });
+  },
+  computed: {},
+  methods: {
+    // ET86查询
+    queryFindAllEtesRules() {
+      const { page, size } = this.pageConfig.pageData;
+      let params = {
+        originOfFlightNo: this.queryForm.originOfFlightNo,
+        updateTimeStart: this.queryForm.startTime
+          ? this.queryForm.startTime
+          : "",
+        updateTimeEnd: this.queryForm.endTime ? this.queryForm.endTime : "",
+        limitStart: (page - 1) * size,
+        limitSize: size,
+        status: this.queryForm.status,
+      };
+      if (this.queryForm.status == "有效") {
+        params.status = "1";
+      }
+      this.tableAttr.loadingTable = true;
+      findAllEtesRules(params)
+        .then((res) => {
+          this.tableAttr.loadingTable = false;
+          const { code, data } = res;
+          if (code == 200) {
+            const valid = data.list.filter((item) => item.status == "1"); // 有效
+            const invalid = data.list.filter((item) => item.status == "0"); // 无效
+            this.tableData = valid.concat(invalid);
+            this.pageConfig.total = data.total;
+          }
+        })
+        .catch(() => {});
+    },
+    // 失焦事件
+    blurEvent({ originOfFlightNo }) {
+      this.queryForm.originOfFlightNo = this.upCase(originOfFlightNo);
+    },
+    // 搜索
+    searchBtn() {
+      this.pageConfig.pageData.page = 1;
+      this.pageConfig.pageData.size = 10;
+      this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
+        this.queryFindAllEtesRules();
+      });
+    },
+    // 翻页序号递增
+    indexAdd(index) {
+      const page = this.pageConfig.pageData.page; // 当前页码
+      const pagesize = this.pageConfig.pageData.size; // 每页条数
+      return index + 1 + (page - 1) * pagesize;
+    },
+    //条数变化
+    handleSizeChange(e) {
+      this.pageConfig.pageData.size = e;
+      this.pageConfig.pageData.page = 1;
+      this.queryFindAllEtesRules();
+    },
+    //页码变化
+    handleCurrentChange(e) {
+      this.pageConfig.pageData.page = e;
+      this.queryFindAllEtesRules();
+    },
+    // 添加
+    addBtn(item) {
+      this.$router.push({
+        path: "/edit",
+        query: {
+          name: "add",
+        },
+      });
+    },
+    // 重置表单
+    restForm() {
+      this.$refs.ruleForm.resetFields("ruleForm");
+    },
+    // 查看
+    viewRow({ row }) {
+      this.$router.push({
+        path: "/edit",
+        query: {
+          name: "view",
+          id: row.id,
+          status: row.status,
+        },
+      });
+    },
+    // 编辑
+    editRow({ row }) {
+      this.$router.push({
+        path: "/edit",
+        query: {
+          name: "edit",
+          id: row.id,
+          status: row.status,
+        },
+      });
+    },
+    // 删除
+    deleteRow({ row }) {
+      this.$confirm("是否确认删除? 删除后该规则设置为无效，不可恢复", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        center: true,
+      })
+        .then(() => {
+          delete row.status;
+          deleteEtesRuleById(row).then((res) => {
+            const { code, msg } = res;
+            if (code == 200) {
+              this.searchBtn();
+              this.msgSuccess("删除成功!");
+            } else {
+              this.msgError(msg || "删除失败");
+            }
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="scss" scoped></style>

+const state = {
+  1: "有效",
+  0: "无效",
+};
+export const tableAttr = {
+  border: true,
+  loadingTable: false,
+  isDragSort: false, // 拖拽tableData数据一定要加id字段
+  maxHeight: 0,
+  // defaultSort: { prop: "updateTime", order: "descending" },
+  btnCofig: {
+    isBtn: true,
+    btnGroup: [
+      {
+        type: "primary", // text、primary、danger
+        icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
+        btnName: "搜索",
+        size: "mini", // medium / small / mini
+        round: false,
+        loading: false,
+        event: "search",
+      },
+      {
+        type: "primary",
+        icon: "el-icon-plus",
+        btnName: "添加",
+        size: "mini",
+        round: false,
+        loading: false,
+        event: "add",
+      },
+    ],
+  },
+};
+export const columnHeader = (indexAdd, viewRow, editRow, deleteRow) => [
+  {
+    type: "index",
+    label: "序号",
+    prop: "id",
+    align: "center",
+    width: "50",
+    index: indexAdd,
+  },
+  {
+    label: "原航班",
+    prop: "originOfFlightNo",
+    align: "center",
+    minWidth: 80,
+  },
+  {
+    label: "配载航班",
+    prop: "rankFltNoStr",
+    align: "center",
+    minWidth: 120,
+  },
+  {
+    label: "航线",
+    prop: "rankFltRouteStr",
+    align: "center",
+    minWidth: 140,
+  },
+  {
+    label: "状态",
+    prop: "status",
+    align: "center",
+    minWidth: 50,
+    render: (h, params) => {
+      const { row } = params;
+      return h("div", `${state[row.status]}`);
+    },
+  },
+  {
+    label: "修改时间",
+    prop: "updateTime",
+    align: "center",
+    minWidth: 80,
+    // sortable: true,
+    // "sort-method": (a, b) => a.createTime - b.createTime,
+  },
+  {
+    label: "修改人",
+    prop: "updateUserName",
+    align: "center",
+    minWidth: 60,
+  },
+  {
+    label: "操作",
+    prop: "operate",
+    align: "center",
+    minWidth: 90,
+    fixed: "right",
+    render: (h, params) => {
+      let operateData = [];
+      if (params.row.status == "1") {
+        operateData = [
+          h(
+            "el-button",
+            {
+              props: {
+                type: "text",
+                size: "mini",
+                icon: "el-icon-view",
+              },
+              on: {
+                click() {
+                  viewRow(params);
+                },
+              },
+            },
+            "查看"
+          ),
+          h(
+            "el-button",
+            {
+              props: {
+                type: "text",
+                size: "mini",
+                icon: "el-icon-edit",
+              },
+              on: {
+                click() {
+                  editRow(params);
+                },
+              },
+            },
+            "修改"
+          ),
+          h(
+            "el-button",
+            {
+              style: {
+                color: "#ff4949",
+              },
+              props: {
+                type: "text",
+                size: "mini",
+                icon: "el-icon-delete",
+              },
+              on: {
+                click() {
+                  deleteRow(params);
+                },
+              },
+            },
+            "删除"
+          ),
+        ];
+      } else {
+        operateData = [
+          h(
+            "el-button",
+            {
+              props: {
+                type: "text",
+                size: "mini",
+                icon: "el-icon-view",
+              },
+              on: {
+                click() {
+                  viewRow(params);
+                },
+              },
+            },
+            "查看"
+          ),
+        ];
+      }
+      return h("div", operateData);
+    },
+  },
+];