mky-vent-base/src/views/vent/gas/gasInspectNonfc/index2.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="gasReport">
    <customHeader>瓦斯巡检地点管理</customHeader>
    <div class="report-container">
      <div class="search-area">
        <a-row>
          <a-col :span="4">
            <div class="area-item">
              <div class="item-text">地点：</div>
              <a-input style="width: 240px" v-model:value="searchParams" placeholder="请输入地点" />
            </div>
          </a-col>
          <a-col :span="20">
            <a-button type="primary" preIcon="ant-design:search-outlined" class="" @click="getSearchCardId">查询</a-button>
            <a-button preIcon="ant-design:sync-outlined" class="ml-10px" @click="getReset">重置</a-button>
            <a-button type="primary" preIcon="ant-design:import-outlined" class="ml-10px" @click="getupload">导入</a-button>
            <a-button type="primary" preIcon="ant-design:download-outlined" class="ml-10px" @click="getdownload">导出</a-button>
            <a-button type="primary" preIcon="ant-design:plus-outlined" class="ml-10px" @click="getTjAddress">新增瓦斯巡检地址</a-button>
          </a-col>
        </a-row>
      </div>
      <a-table
        :key="keyActive"
        :columns="columns2"
        size="small"
        :data-source="tableData"
        :scroll="{ y: 500 }"
        class="tableW"
        :pagination="pagination"
        @change="pageChange"
      >
        <template #action="{ record }">
          <a class="table-action-link" @click="handlerEdit(record)">编辑</a>
          <a-popconfirm title="删除内容无法恢复，是否删除" ok-text="确定" cancel-text="取消" @confirm="handleDelCardInfo(record)">
            <a class="table-action-link">删除</a>
          </a-popconfirm>
        </template>
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex == 'isSensor'">
            <div v-if="text == '1'">
              <div class="table-text text-y">是</div>
            </div>
            <div v-else>
              <div class="table-text text-n">否</div>
            </div>
          </template>
          <template v-if="column.dataIndex == 'checkState'">
            <div v-if="text == '1'">
              <div class="table-text text-y">已检</div>
            </div>
            <div v-else>
              <div class="table-text text-n">未检</div>
            </div>
          </template>
        </template>
      </a-table>
      <!-- 任务管理弹窗 -->
      <a-modal v-model:visible="visibleTask" width="850px" :footer="null" :title="titleTask" centered destroyOnClose>
        <inspectTask @handleTaskSubmit="handleTaskSubmit" @handleTaskCancel="handleTaskCancel" />
      </a-modal>
      <!-- 编辑弹窗 -->
      <a-modal v-model:visible="visibleEdit" width="650px" :footer="null" :title="titleEdit" centered destroyOnClose>
        <inspectEdit :inspectEditData="inspectEditData" @confirmEdit="confirmEdit" @cancelEdit="cancelEdit" />
      </a-modal>

      <!-- 导入弹窗 -->
      <a-modal v-model:visible="visibleUploadorDown" width="450px" :footer="null" :title="titleUploadorDown" centered destroyOnClose>
        <uploadOrdown :modalType="modalType" @handlerComfirm="handlerComfirm" @handlerCancel="handlerCancel" />
      </a-modal>
      <!-- 新增瓦斯巡检地点弹窗 -->
      <a-modal v-model:visible="visibleAddress" width="450px" :footer="null" :title="titleAddress" centered destroyOnClose>
        <addressAdd @confirmAddress="confirmAddress" @cancelAddress="cancelAddress" />
      </a-modal>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive } from 'vue';
  import customHeader from '/@/components/vent/customHeader.vue';
  import inspectTask from './components/inspectTask.vue';
  import inspectEdit from './components/inspectEdit2.vue';
  import uploadOrdown from './components/uploadOrdown.vue';
  import addressAdd from './components/addressAdd2.vue';
  import { message } from 'ant-design-vue';
  import { columns2, pagination } from './gasInspectNonfc.data';
  import { list, importByExcel, exportGasByExcel, moveOrderNum, edit, taskSubmit, clearCardInfo, addGasReportAddress } from './gasInspectNonfc.api';

  let keyActive = ref(0);
  let searchParams = ref('');
  let tableData = ref<any[]>([]); //巡检列表
  let visibleTask = ref(false); //控制任务管理弹窗的显示与隐藏
  let titleTask = ref('');
  let visibleEdit = ref(false); //控制编辑弹窗的显示与隐藏
  let titleEdit = ref(''); //编辑弹窗标题
  let inspectEditData = reactive({}); //编辑弹窗数据
  let visibleUploadorDown = ref(false); //控制导入/导出弹窗的显示与隐藏
  let titleUploadorDown = ref('');
  let modalType = ref(''); //判断当前是导入/导出弹窗
  let visibleAddress = ref(false); //控制巡检地址新增弹窗的显示与隐藏
  let titleAddress = ref(''); //区队巡检地址新增弹窗标题

  //打开任务管理弹窗
  //   let handlerTask = () => {
  //     visibleTask.value = true;
  //     titleTask.value = '瓦斯巡检任务管理';
  //   };
  //任务管理下发
  async function handleTaskSubmit(param) {
    let res = await taskSubmit({ ...param });
    if (res) {
      visibleTask.value = false;
      queryByIdList();
    }
  }
  //任务管理弹窗关闭
  let handleTaskCancel = () => {
    visibleTask.value = false;
  };
  //打开编辑弹窗
  let handlerEdit = (record) => {
    visibleEdit.value = true;
    titleEdit.value = '瓦斯巡检点编辑';
    inspectEditData = Object.assign({}, record);
  };
  //编辑提交
  async function confirmEdit(param) {
    let res = await edit({ ...param });
    if (res) {
      queryByIdList();
      visibleEdit.value = false;
    }
  }
  //编辑取消
  let cancelEdit = () => {
    visibleEdit.value = false;
  };

  //删除巡检卡信息
  async function handleDelCardInfo(record) {
    let res = await clearCardInfo({ id: record.id });
    if (res) {
      queryByIdList();
    }
  }

  //通过地点查询
  async function queryByIdList() {
    let res = await list({ strinstallpos: searchParams.value, pageNo: pagination.current, pageSize: pagination.pageSize });
    keyActive.value = new Date().getTime();
    tableData.value = res.records.map((el: any) => {
      return {
        morning: el.insType,
        afterNoon: el.insType,
        evening: el.insType,
        ...el,
      };
    });
    pagination.total = res.total;
  }
  //查询
  let getSearchCardId = () => {
    pagination.current = 1;
    queryByIdList();
  };
  //重置
  let getReset = () => {
    pagination.current = 1;
    searchParams.value = '';
    queryByIdList();
  };
  //分页切换
  let pageChange = (val) => {
    pagination.current = val.current;
    pagination.pageSize = val.pageSize;
    queryByIdList();
  };
  //导入
  let getupload = () => {
    modalType.value = 'upload';
    visibleUploadorDown.value = true;
    titleUploadorDown.value = '导入';
  };
  //确定导入
  async function handlerComfirm(param) {
    if (modalType.value == 'upload') {
      let res = await importByExcel(param);
      if (res.code == 200) {
        visibleUploadorDown.value = false;
        message.success('导入成功');
        queryByIdList();
      }
    } else {
      let res = await exportGasByExcel({ insType: param.insType });
      console.log(res, '导出数据');
      if (res) {
        let filename = `${new Date().getTime()}.xlsx`;
        downFilePublic(res, filename);
        message.success('导出成功');
      }
    }
  }
  //导出
  let getdownload = () => {
    modalType.value = 'download';
    visibleUploadorDown.value = true;
    titleUploadorDown.value = '导出';
  };
  //确定导出
  async function handlerCancel() {
    modalType.value = '';
  }
  // 下载公用方法
  function downFilePublic(content, fileName) {
    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
    // IE10以上支持blob但是依然不支持download
    if ('download' in document.createElement('a')) {
      // 支持a标签download的浏览器
      const link = document.createElement('a'); // 创建a标签
      link.download = fileName; // a标签添加属性
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click(); // 执行下载
      URL.revokeObjectURL(link.href); // 释放url
      document.body.removeChild(link); // 释放标签
    } else {
      // 其他浏览器
      //   navigator.msSaveBlob(blob, fileName);
    }
  }
  //列表上移
  async function moveUp(param) {
    let res = await moveOrderNum({ id: param.id, moveType: 'upp' });
    console.log(res, '向上移动');
    if (res) {
      queryByIdList();
    }
  }
  //列表下移
  async function moveDown(param) {
    let res = await moveOrderNum({ id: param.id, moveType: 'bel' });
    console.log(res, '向下移动');
    if (res) {
      queryByIdList();
    }
  }
  //巡检次数筛选
  let handlerFilter = (param) => {
    let data = param.key;
    switch (data) {
      case '1':
        pagination.current = 1;
        tableData.value = tableData.value.filter((v) => v.insType == '1');
        break;
      case '2':
        pagination.current = 2;
        tableData.value = tableData.value.filter((v) => v.insType == '2');
        break;
    }
  };
  //新增瓦斯巡检地点
  let getTjAddress = () => {
    visibleAddress.value = true;
    titleAddress.value = '新增瓦斯巡检地址';
  };
  //确定新增
  async function confirmAddress(param) {
    let res = await addGasReportAddress(param);
    console.log(res, '新增瓦斯巡检地点');
    if (res) {
      visibleAddress.value = false;
      queryByIdList();
    }
  }
  //取消新增
  let cancelAddress = () => {
    visibleAddress.value = false;
  };
  onMounted(() => {
    queryByIdList();
  });
</script>

<style lang="less" scoped>
  .gasReport {
    width: 100%;
    height: 100%;
    padding: 80px 10px 15px 10px;
    box-sizing: border-box;
    position: relative;

    .search-area {
      margin: 20px 0px;

      .area-item {
        display: flex;
        align-items: center;

        .item-text {
          color: #fff;
        }
      }
    }

    .table-text {
      margin-bottom: 5px;
    }

    .text-y {
      color: #0be716;
    }

    .text-n {
      color: #ff0000;
    }

    .zxm-picker,
    .zxm-input {
      border: 1px solid #3ad8ff77 !important;
      background-color: #ffffff00 !important;
      color: #fff !important;
    }
  }

  :deep(.zxm-table-thead > tr > th:last-child) {
    border-right: 1px solid #91e9fe !important;
  }

  :deep(.zxm-picker-input > input) {
    color: #fff;
  }

  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
    border: 1px solid #3ad8ff77 !important;
    background-color: #ffffff00 !important;
  }

  :deep(.zxm-select-selection-item) {
    color: #fff !important;
  }
</style>