Merge remote-tracking branch 'origin/yagwly_fa_master' into yagwly_fa_master

wujianwei

2025-09-10 32337b3f584a5b95af114697178251b51ecc14fd

 ui/admin-ui3/src/views/cwgl/estimatedReceivable/index.vue

@@ -1,189 +1,641 @@
<template>
  <basicContainer >
    <avue-crud
        :option="option"
        :table-loading="pageF.loading"
        :data="tableData"
        :page="page"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crudRef"
        @row-update="rowUpdate"
        @row-save="rowSave"
        @refresh-change="refreshChange"
        @row-del="rowDel"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @on-load="onLoad"
    >
  <basicContainer>
    <avue-crud :option="option" v-model:search="queryParams" :table-loading="pageF.loading" :data="tableData"
      :page="page" :permission="permissionList" :before-open="beforeOpen" v-model="form" ref="crudRef"
      @row-update="rowUpdate" @row-save="rowSave" @refresh-change="refreshChange" @row-del="rowDel"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">

      <template #dispatchNo-form="{ row, size, }">
        <div style="cursor: pointer;">
          <el-input v-model="form.dispatchNo" @click="handleFormSearch" readonly placeholder="请输入 调度单号">
            <template #append>
              <el-button icon="Search" style="cursor: pointer;" @click="handleFormSearch"></el-button>
            </template>
          </el-input>
        </div>
      </template>



      <template #menu-left>
        <el-button
            type="success"
            icon="Edit"
            :disabled="pageF.single"
            v-hasPermi="['cwgl:estimatedReceivable:edit']"
            @click="handleUpdate">修改
        <el-button type="success" icon="Edit" :disabled="editIshow" v-hasPermi="['cwgl:estimatedReceivable:edit']"
          @click="handleUpdate">修改
        </el-button>
        <el-button
            type="danger"
            icon="Delete"
            :disabled="pageF.multiple"
            @click="handleDelete"
            v-hasPermi="['cwgl:estimatedReceivable:remove']"
        >删除
        <el-button type="danger" icon="Delete" :disabled="removeIshow" @click="handleDelete"
          v-hasPermi="['cwgl:estimatedReceivable:remove']">删除
        </el-button>
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['cwgl:estimatedReceivable:export']"
        >导出
        <el-button type="warning" plain icon="Download" @click="handleExport"
          v-hasPermi="['cwgl:estimatedReceivable:export']">导出
        </el-button>
      </template>




      <template #menu="{ size, row, index }">
        <el-link class="link-btn" type="primary" :underline="false" plain :size="size"
          @click="handleEditBtn(row, index)" v-if="[0, 1].includes(row.relatedBillStatus) && row.isConfirmed != 2"
          v-hasPermi="['cwgl:estimatedReceivable:cancel']"> 编辑
        </el-link>
        <el-link class="link-btn" type="primary"
          v-if="row.isConfirmed == 1 && row.relatedBillStatus != 2 && row.relatedBillStatus != 3" :underline="false"
          plain :size="size" @click="handleCancel(row)" v-hasPermi="['cwgl:estimatedReceivable:cancel']"> 取消确认
        </el-link>
        <el-link class="link-btn" type="primary" v-if="row.isConfirmed == 0 && ![2, 3].includes(row.relatedBillStatus)"
          :underline="false" plain @click="handleAffirm(row)" v-hasPermi="['cwgl:estimatedReceivable:confirm']"> 确认
        </el-link>
        <el-link class="link-btn" type="primary"
          v-if="row.isConfirmed == 1 && row.relatedBillStatus != 2 && row.relatedBillStatus != 3" :underline="false"
          plain @click="handleInvalid(row)" v-hasPermi="['cwgl:estimatedReceivable:invalid']"> 作废
        </el-link>
        <el-link class="link-btn" type="primary" :underline="false" plain @click="handleFlow(row)"
          v-hasPermi="['cwgl:estimatedReceivable:flog']"> 日志
        </el-link>
      </template>
    </avue-crud>
  </basicContainer>

  <el-dialog v-model="dialog.visible" :title="dialog.title" width="1200px">
    <!-- <el-form ref="storagesTransferRef" :model="newForm" :rules="rules" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="调度单号" prop="dispatchNo">
            <el-input v-model="newForm.dispatchNo" placeholder="请输入调度单号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称" prop="customerName">
            <el-input v-model="newForm.customerName" placeholder="请输入客户名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="newForm.projectName" placeholder="请输入项目名称" />

          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下单日期" prop="createdTime">
            <el-date-picker v-model="newForm.createdTime" type="date"  valueFormat="YYYY-MM-DD"  placeholder="请选择下单日期"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="Search" @click="newGetList">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <el-table :data="newTableData" @selection-change="handleSelectionChange" border ref="newTableRef"
      @row-click="handleRowClick">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column fixed label="调度单号" align="center" prop="dispatchNo" show-overflow-tooltip />
      <el-table-column label="客户名称" align="center" prop="customerName" show-overflow-tooltip />
      <el-table-column label="项目名称" align="center" prop="projectName" show-overflow-tooltip />
      <el-table-column label="下单日期" align="center" prop="createdTime" show-overflow-tooltip />
    </el-table> -->

    <avue-crud :option="newOption" :data="newTableData" v-model:search="newForm" :page="newPageF"
      :table-loading="itemTableLoading2" @search-change="newSearchChange" ref="newTableRef"
      @selection-change="newSelectionChange" @search-reset="newRsetChange"
      @current-change="handleAttachmentCurrentChange" @size-change="handleAttachmentSizeChange" @on-load="newOnLoad">
    </avue-crud>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>

  </el-dialog>

  <flowLog ref="flowLogIshow" :flowParams="flowParams"></flowLog>
</template>

<script setup name="estimatedReceivable" lang="ts">
  import {EstimatedReceivableI,addEstimatedReceivable, delEstimatedReceivable, exportEstimatedReceivable, getEstimatedReceivable, listEstimatedReceivable, updateEstimatedReceivable} from "@/api/cwgl/estimatedReceivable";
  import useCurrentInstance from "@/utils/useCurrentInstance";
  import {computed,reactive, ref, toRefs} from "vue";
  import {PagesInterface, PageQueryInterface} from "@/utils/globalInterface";
  import {usePagePlus} from "@/hooks/usePagePlus";
  import {hasPermission} from "@/utils/permissionUtils";
import {
  EstimatedReceivableI, addEstimatedReceivable, delEstimatedReceivable, exportEstimatedReceivable, getEstimatedReceivable, listEstimatedReceivable, updateEstimatedReceivable,
  getEstimatedReceivableConfirm, getCwglEstimatedReceivableCancel, getEstimatedReceivableInvalid
} from "@/api/cwgl/estimatedReceivable";
import { listEstimatedReceivableLog } from "@/api/cwgl/estimatedReceivableLog";
import { listEstimatedReceivableBillLog } from "@/api/cwgl/estimatedReceivableBillLog";
import {
  getSelectCustomNam,
} from "@/api/cwgl/pendingSettlementBusiness";
import {
  listPendingSettlementBusiness,
} from "@/api/cwgl/pendingSettlementBusiness";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { computed, reactive, ref, toRefs } from "vue";
import { PagesInterface, PageQueryInterface } from "@/utils/globalInterface";
import { usePagePlus } from "@/hooks/usePagePlus";
import { hasPermission } from "@/utils/permissionUtils";
import { ElMessage, ElMessageBox } from "element-plus";

  const { proxy } = useCurrentInstance();
  const crudRef = ref();
const { proxy } = useCurrentInstance();
const crudRef = ref();

  const permissionList = computed(()=>{
    return {
      addBtn: hasPermission(["cwgl:estimatedReceivable:add"]),
      delBtn: hasPermission(["cwgl:estimatedReceivable:remove"]),
      editBtn: hasPermission(["cwgl:estimatedReceivable:edit"]),
      viewBtn: hasPermission(["cwgl:estimatedReceivable:query"]),
    }
  })
const permissionList = computed(() => {
  return {
    addBtn: hasPermission(["cwgl:estimatedReceivable:add"]),
    delBtn: hasPermission(["cwgl:estimatedReceivable:remove"]),
    editBtn: hasPermission(["cwgl:estimatedReceivable:edit"]),
    viewBtn: hasPermission(["cwgl:estimatedReceivable:query"]),
  }
})

  const data = reactive({
    form:<EstimatedReceivableI>{},
    queryParams:<EstimatedReceivableI&PageQueryInterface>{},
    page: <PagesInterface>{
      pageSize: 10,
      total: 0,
      currentPage: 1,
const data = reactive({
  form: <EstimatedReceivableI>{},
  newTableData: [],
  removeIshow: true,
  editIshow: true,
  newForm: <EstimatedReceivableI>{
    pageNum: 1,
    pageSize: 10
  },
  queryParams: <EstimatedReceivableI & PageQueryInterface>{
    feeType: 0
  },
  page: <PagesInterface>{
    pageSize: 10,
    total: 0,
    currentPage: 1,
  },
  selectionList: [],
  newSelectionList: [],
  itemTableLoading1: false,
  itemTableLoading2: false,
})
const { queryParams, form, page, selectionList, newForm, newTableData, newSelectionList, itemTableLoading1, itemTableLoading2, removeIshow, editIshow } = toRefs(data);
const option = ref({
  pageKey: 'EstimatedReceivable',
  rowKey: 'id',
  searchSpan: 5,
  editDisplay: false,

  addBtn: true,
  editBtn: false,
  editBtnIcon: ' ',

  delBtn: false,
  viewBtn: false,

  searchLabelWidth: 100,
  labelWidth: 120,
  column: {
    // id: {
    //   label: 'ID',
    // },
    feeSystemNo: {
      label: '费用系统编号',
      rules: [
        {
          required: true,
          message: "费用系统编号不能为空", trigger: "blur"
        }
      ],
      minWidth: 140,
      search: true,
      addDisplay: false,
      editDisplay: false,
    },
    selectionList:[],
  })
  const {queryParams,form,page,selectionList} = toRefs(data);
  const option = ref({
    pageKey: 'EstimatedReceivable',
    rowKey: 'id',
    column: {
                                id: {
          label: 'ID',
                            },
                                feeSystemNo: {
          label: '费用系统编号',
                                rules: [
              {
                required: true,
                message: "费用系统编号不能为空", trigger: "blur" }
            ],                  },
                                dispatchNo: {
          label: '调度单号',
                                rules: [
              {
                required: true,
                message: "调度单号不能为空", trigger: "blur" }
            ],                  },
                                customerName: {
          label: '客户名称',
                                rules: [
              {
                required: true,
                message: "客户名称不能为空", trigger: "blur" }
            ],                  },
                                projectName: {
          label: '项目名称',
                            },
                                orderDate: {
          label: '下单日期',
                            },
                                feeName: {
          label: '费用名称',
                                rules: [
              {
                required: true,
                message: "费用名称不能为空", trigger: "blur" }
            ],                  },
                                estimatedAmount: {
          label: '预估费用金额',
                            },
                                currency: {
          label: '币制',
                            },
                                relatedBillName: {
          label: '关联账单名称',
                            },
                                relatedBillStatus: {
          label: '关联账单状态',
                            },
                                isConfirmed: {
          label: '是否确认(0:未确认;1:已确认)',
                            },
                                confirmBy: {
          label: '确认人',
                            },
                                confirmTime: {
          label: '确认时间',
                            },
                                remark: {
          label: '备注',
                      type: 'textarea', minRows: 3, maxRows: 5,
                            },
                                createBy: {
          label: '创建人',
                            },
                                updateBy: {
          label: '更新人',
                            },
                                createTime: {
          label: '创建时间',
                            },
                                updateTime: {
          label: '更新时间',
                            },
                                deleted: {
          label: '删除标记(0:正常;1:删除)',
                            },
          }
  })
    dispatchNo: {
      label: '调度单号',
      minWidth: 120,
      rules: [
        {
          required: true,
          message: "调度单号不能为空", trigger: "blur"
        }
      ],
      search: true,
    },
    // customerName: {
    //   label: '客户名称',
    //   rules: [
    //     {
    //       required: true,
    //       message: "客户名称不能为空", trigger: "blur"
    //     }
    //   ],
    //   search: true,
    //   disabled: true,
    // },
    customerName: {
      label: '客户名称',
      search: true,
      minWidth: 220,
      showOverflowTooltip: true,
      type: 'select',           // 设置为下拉框类型
      dicData: [], // 使用 selectCustomName 作为数据源
      disabled: false  // 根据需要设置是否禁用
    },
    projectName: {
      label: '项目名称',
      search: true,
      disabled: true,
      minWidth: 220,
      showOverflowTooltip: true,
    },
    orderDate: {
      label: '下单日期',
      search: true,
      minWidth: 180,
      type: 'datetime',  // 改为 datetime 类型
      format: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
    },
    feeName: {
      label: '费用名称',
      minWidth: 120,
      rules: [
        {
          required: true,
          message: "费用名称不能为空", trigger: "blur"
        }
      ],
      search: true,
    },

  const { tableData,pageF,rowSave,rowUpdate,rowDel,beforeOpen,searchChange,
    searchReset,selectionChange,onLoad,currentChange,sizeChange,handleDelete,handleExport,handleUpdate,refreshChange} = usePagePlus({
    form:form,
    option:option,
    queryParams:queryParams,
    idKey:'id',
    page:page.value,
    getListApi:listEstimatedReceivable,
    getDetailApi:getEstimatedReceivable,
    exportApi:exportEstimatedReceivable,
    deleteApi:delEstimatedReceivable,
    addApi:addEstimatedReceivable,
    updateApi:updateEstimatedReceivable,
    handleUpdateFunc:()=>{
    estimatedAmount: {
      label: '费用金额',
      rules: [
        {
          required: true,
          message: "费用金额不能为空", trigger: "blur"
        }
      ],
    },
    currency: {
      label: '币制',
      disabled: true,
    },
    relatedBillName: {
      label: '关联账单名称',
      minWidth: 120,
      addDisplay: false,  // 新增时不显示
      editDisplay: false, // 修改时不显示
    },
    relatedBillStatus: {
      label: '关联账单状态',
      search: true,
      minWidth: 120,
      dataType: 'string',
      type: 'select',
      addDisplay: false,  // 新增时不显示
      editDisplay: false, // 修改时不显示
      dicUrl: '/system/dict/data/type/sys_related_status',
      //    formatter: (row, value) => {
      // // 自定义格式化逻辑（如果需要）
      //   return value;
      //  }
    },
    isConfirmed: {
      label: '是否确认',
      dataType: 'string',
      addDisplay: false,  // 新增时不显示
      editDisplay: false, // 修改时不显示
      search: true,
      type: 'select',
      dicUrl: '/system/dict/data/type/sys_affirm_status',
    },
    remark: {
      label: '备注',
      minWidth: 120,
      showOverflowTooltip: true,
      type: 'textarea', minRows: 3, maxRows: 5,
    },



    // confirmBy: {
    //   label: '确认人',
    // },
    // confirmTime: {
    //   label: '确认时间',
    // },

    // createBy: {
    //   label: '创建人',
    // },
    // updateBy: {
    //   label: '更新人',
    // },
    // createTime: {
    //   label: '创建时间',
    // },
    // updateTime: {
    //   label: '更新时间',
    // },
    // deleted: {
    //   label: '删除标记(0:正常;1:删除)',
    // },
  }
})

const newOption = ref({
  pageKey: 'PendingSettlementBusiness',
  rowKey: 'id',
  searchSpan: 5,
  selectionType: 'single',
  selectType: 'radio',
  editDisplay: false,
  addBtn: false,
  editBtn: false,
  menu: false,
  delBtn: false,
  viewBtn: false,
  searchLabelWidth: 100,
  labelWidth: 120,
  indexLabel: '序号',
  column: {
    dispatchNo: {
      label: '调度单号',
      search: true,
    },
    customerName: {
      label: '客户名称',
      search: true,
    },
    projectName: {
      label: '项目名称',
      search: true,
    },
    createdTime: {
      label: '下单日期',
      search: true,
      type: 'date',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
    }
  }
})
const { tableData, pageF, rowSave, rowUpdate, rowDel, beforeOpen, searchChange,
  searchReset, selectionChange, onLoad, currentChange, sizeChange, handleDelete, handleExport, handleUpdate, refreshChange } = usePagePlus({
    form: form,
    option: option,
    queryParams: queryParams,
    idKey: 'id',
    page: page.value,
    getListApi: listEstimatedReceivable,
    getDetailApi: getEstimatedReceivable,
    exportApi: exportEstimatedReceivable,
    deleteApi: delEstimatedReceivable,
    addApi: addEstimatedReceivable,
    updateApi: updateEstimatedReceivable,
    handleUpdateFunc: () => {
      crudRef.value.rowEdit(selectionList.value[0]);
    },
    handleSelectionChangeFunc:(selection:any)=>{
    handleSelectionChangeFunc: (selection: any) => {
      selectionList.value = selection;
      console.log(selection);

      // 根据选中项数量和状态设置编辑按钮是否可用
      if (selection.length === 1 && [0, 1].includes(selection[0].relatedBillStatus)) {
        editIshow.value = false;
      } else {
        editIshow.value = true;
      }

      if (selection.length === 1 && [0].includes(selection[0].isConfirmed)) {
        removeIshow.value = false;
      } else {
        removeIshow.value = true;
      }

    },
    getBeginListFunc: (params = {}) => {
      params.feeType = 0;
      return params

    }

  })
const dialog = reactive({
  visible: false,
  title: '',
})
const newPageF = ref<PagesInterface>({
  total: 0,
  pageSize: 10
})
const storagesTransferRef = ref<FormInstance>()
const handleFormSearch = () => {
  listPendingSettlementBusiness(newForm.value).then((res) => {
    if (res.code === 200) {
      dialog.visible = true;
      dialog.title = '选择调度单号';
      newTableData.value = res.rows || [];
      newPageF.value.total = res.total || 0;
      console.log(newPageF.value.totale);

    }
  })
}
const newGetList = () => {
  console.log(newForm.value);

  listPendingSettlementBusiness(newForm.value).then((res) => {
    if (res.code === 200) {
      newTableData.value = res.rows || [];
      newPageF.value.total = res.total || 0;
    }
  })
}



const newTableRef = ref();
const newSelectionChange = (selection: any) => {

  // 只保留最后一个选中的项
  if (selection.length > 1) {
    const nowVal = selection.shift();
    // newTableRef.value.clearSelection([]);
    newTableRef.value.toggleRowSelection(nowVal, false);

  } else {
    console.log("newSelectionChange", selection);

    newSelectionList.value = selection
  }
}

const resetQuery = () => {
  newForm.value = {
    pageNum: 1,
    pageSize: 10
  }
  listPendingSettlementBusiness(newForm.value).then((res) => {
    if (res.code === 200) {
      newTableData.value = res.rows || [];
      newPageF.value.total = res.total || 0;
    }
  })
}
const submitForm = () => {
  if (newSelectionList.value.length === 0) {
    proxy.$modal.msgWarning("请选择调度单号");
    return;
  }
  const selectedDispatchNo = newSelectionList.value[0]
  // option.value.column = selectedDispatchNo;
  // 将选中行的数据赋值给表单
  form.value.dispatchNo = selectedDispatchNo.dispatchNo;
  form.value.customerName = selectedDispatchNo.customerName;
  form.value.projectName = selectedDispatchNo.projectName;
  form.value.currency = '人民币';
  dialog.visible = false;
}

/*  */
// 处理附件分页页码变化
const handleAttachmentCurrentChange = (currentPage: number) => {
  newForm.value.pageNum = currentPage;
  getEstimatedReceivableCancel();
}
// 处理附件分页大小变化
const handleAttachmentSizeChange = (pageSize: number) => {
  newForm.value.pageSize = pageSize;
  getEstimatedReceivableCancel();
}
const newOnLoad = (newPageF) => {
  getEstimatedReceivableCancel(newPageF)
}
// 加载附件数据的函数
const loadAttachmentData = () => {
  itemTableLoading2.value = true;
  listPendingSettlementBusiness(newForm.value).then((res) => {
    if (res.code === 200) {
      dialog.visible = true;
      dialog.title = '选择调度单号';
      newTableData.value = res.rows || [];
      newPageF.value.total = res.total || 0;
    }
    itemTableLoading2.value = false;
  })

}
const getEstimatedReceivableCancel = () => {
  itemTableLoading2.value = true;
  listPendingSettlementBusiness(newForm.value).then((res) => {
    if (res.code === 200) {
      newTableData.value = res.rows || [];
      newPageF.value.total = res.total || 0;
    }
    itemTableLoading2.value = false;
  })
}
const newSearchChange = (params, done) => {
  itemTableLoading2.value = true;
  listPendingSettlementBusiness(newForm.value).then((res) => {
    if (res.code === 200) {
      done()
      newTableData.value = res.rows || [];
      newPageF.value.total = res.total || 0;
    }
    itemTableLoading2.value = false;
  })
}
const newRsetChange = (done) => {
  getEstimatedReceivableCancel()
}
// 附件表格加载事件
const attachmentChange = () => {
  // loadAttachmentData();
}
/*  */
const cancel = () => {
  dialog.visible = false;
  newForm.value = {
    pageNum: 1,
    pageSize: 10
  }
  newTableData.value = [];
}
const handleCancel = (row: any) => {

  proxy.$modal.confirm(`是否取消确认该调度单号 ：${row.dispatchNo}?`).then(function () {
    return getCwglEstimatedReceivableCancel(row.id);
  }).then((res) => {
    if (res.code == 200) {
      console.log(res);

      onLoad(page.value);
      proxy.$modal.msgSuccess(res.msg);
    }
  })
}
const handleAffirm = (row: any) => {
  proxy.$modal.confirm(`是否确认该调度单号 ：${row.dispatchNo}?`).then(function () {
    return getEstimatedReceivableConfirm(row.id);
  }).then((res) => {
    onLoad(page.value);

    proxy.$modal.msgSuccess(res.msg);
  })

}

const handleInvalid = (row: any) => {
  proxy.$modal.confirm(`是否作废该调度单号 ：${row.dispatchNo}?`).then(function () {
    return getEstimatedReceivableInvalid(row.id);
  }).then((res) => {
    onLoad(page.value);

    proxy.$modal.msgSuccess(res.msg);
  })

}



const flowLogIshow = ref()
const flowParams = ref([])

const handleFlow = (row: string) => {
  let data = {
    estimatedId: row.id,
  }
  listEstimatedReceivableLog(data).then((res) => {
    flowParams.value = res.rows
    flowLogIshow.value.openModel()

  })
}
const handleEditBtn = (row, index) => {
  crudRef.value.rowEdit(row, index)
  // option.value.editBtn = true;
}

/*  */
const selectCustomName = ref([]);
const getSelectCustomName = () => {
  getSelectCustomNam().then((res) => {
    if (res.code === 200) {
      // selectCustomName.value = res.data;
      selectCustomName.value = res.data.map(item => ({
        dictLabel: item,
        dictValue: item
      }));
      option.value.column.customerName.dicData = selectCustomName.value || [];
    }
  })
}
getSelectCustomName()
</script>
<style>
:deep(.avue-crud__table) {
  overflow-y: auto;
}

:deep(.el-scrollbar__bar.is-horizontal) {
  pointer-events: auto;
}
</style>