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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="gasReport">
    <customHeader>瓦斯巡检任务管理</customHeader>
    <div class="report-container">
      <BasicTable @register="registerTable1">
        <template #tableTitle>
          <a-space>
            <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleEdit">新增任务</a-button>
          </a-space>
        </template>
        <template #action="{ record }">
          <a class="table-action-link" @click="handleManage(record)">管理</a>
          <a class="table-action-link" @click="handleDetail(record)">详情</a>
          <a class="table-action-link" @click="handleEdit(record)">编辑</a>
          <a-popconfirm title="删除内容无法恢复，是否删除" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record)">
            <a class="table-action-link">删除</a>
          </a-popconfirm>
        </template>
      </BasicTable>
      <BasicModal :destroy-on-close="true" title="任务表单" @register="registerModal1" @ok="handleSubmit">
        <BasicForm class="h-230px" @register="registerForm" />
      </BasicModal>
      <BasicModal :destroy-on-close="true" title="任务详情列表" :show-ok-btn="false" :width="1200" @register="registerModal2">
        <a-space class="search-area mb-10px">
          <div class="item-text">巡检地址：</div>
          <a-input style="width: 240px" v-model:value="searchParams2.deviceName" placeholder="请输入巡检地址" />
          <a-button type="primary" preIcon="ant-design:search-outlined" class="ml-10px" @click="tableContext2.reload()">查询</a-button>
        </a-space>
        <BasicTable @register="registerTable2">
          <!-- <template #action="{ record }"> </template> -->
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex == 'checkState'">
              <div v-if="text == true">
                <div class="table-text color-green">已检</div>
              </div>
              <div v-else>
                <div class="table-text color-red">未检</div>
              </div>
            </template>
          </template>
        </BasicTable>
      </BasicModal>
      <BasicModal :destroy-on-close="true" title="任务管理列表" :width="1200" :show-ok-btn="false" @register="registerModal3">
        <a-space class="search-area mb-10px">
          <div class="item-text">巡检地址：</div>
          <a-input style="width: 240px" v-model:value="searchParams3.deviceName" placeholder="请输入巡检地址" />
          <a-button type="primary" preIcon="ant-design:search-outlined" class="ml-10px" @click="tableContext3.reload()">查询</a-button>
          <a-popconfirm title="确认操作" ok-text="确定" cancel-text="取消" @confirm="handlePatch('add')">
            <a-button type="primary" preIcon="ant-design:plus-outlined">添加</a-button>
          </a-popconfirm>
          <a-popconfirm title="删除内容无法取消，是否删除" ok-text="确定" cancel-text="取消" @confirm="handlePatch('del')">
            <a-button type="primary" preIcon="ant-design:close-outlined">删除</a-button>
          </a-popconfirm>
        </a-space>
        <BasicTable :rowSelection="rowSelection" @register="registerTable3">
          <!-- <template #action="{ record }"> </template> -->
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex == 'isSelect'">
              <div v-if="text == true">
                <div class="table-text color-green">是</div>
              </div>
              <div v-else>
                <div class="table-text">否</div>
              </div>
            </template>
            <template v-if="column.dataIndex == 'isOtherSelect'">
              <div v-if="text == true">
                <div class="table-text color-green">是</div>
              </div>
              <div v-else>
                <div class="table-text">否</div>
              </div>
            </template>
          </template>
        </BasicTable>
      </BasicModal>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, nextTick } from 'vue';
  import customHeader from '/@/components/vent/customHeader.vue';
  import { taskColumns, pagination, taskschemas, taskDetailsColumns, taskManageColumns } from './gasInspect.data';
  import { deleteTeam, getManageTasklist, operateGasCheckTaskDetail, taskDetailsList, teamAdd, teamEdit, teamList } from './gasInspect.api';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { Modal, message } from 'ant-design-vue';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { getAutoScrollContainer } from '/@/utils/common/compUtils';

  // 任务列表
  const searchParams1 = ref<any>({ deviceName: '' });
  const { tableContext: tx1 } = useListPage({
    tableProps: {
      api: teamList,
      beforeFetch: (params) => {
        Object.assign(params, searchParams1.value);
      },
      columns: taskColumns,
      pagination,
      formConfig: {
        labelAlign: 'left',
        labelWidth: 80,
        compact: true,
        schemas: [
          {
            label: '日期',
            field: 'createTime',
            component: 'DatePicker',
            componentProps: {
              showTime: false,
              valueFormat: 'YYYY-MM-DD',
              getPopupContainer: getAutoScrollContainer,
            },
          },
          {
            label: '所属区队',
            field: 'districtTeam',
            component: 'JDictSelectTag',
            componentProps: {
              dictCode: 'districtTeam',
            },
          },
        ],
      },
      actionColumn: {
        title: '操作',
        dataIndex: 'action',
        width: 250,
        align: 'center',
        slots: { customRender: 'action' },
      },
      showTableSetting: false,
      useSearchForm: true,
    },
    pagination: true,
  });
  // 任务详情列表
  const searchParams2 = ref<any>({ deviceName: '' });
  const { tableContext: tx2 } = useListPage({
    tableProps: {
      api: taskDetailsList,
      beforeFetch: (params) => {
        Object.assign(params, {
          ...searchParams2.value,
          taskId: selectedRow.value.id,
        });
      },
      columns: taskDetailsColumns,
      pagination,
      showActionColumn: false,
      showTableSetting: false,
      useSearchForm: false,
    },
    pagination: true,
  });
  // 任务管理列表
  const searchParams3 = ref<any>({ deviceName: '' });
  const { tableContext: tx3 } = useListPage({
    tableProps: {
      api: getManageTasklist,
      beforeFetch: (params) => {
        Object.assign(params, {
          ...searchParams3.value,
          taskId: selectedRow.value.id,
        });
      },
      afterFetch(resultItems) {
        resultItems.forEach((item, i) => {
          item.id = i;
        });
        return resultItems;
      },
      rowSelection: {
        type: 'checkbox',
        getCheckboxProps: (record) => {
          return {
            disabled: record.isOtherSelect,
          };
        },
      },
      canResize: false,
      columns: taskManageColumns,
      showActionColumn: false,
      showTableSetting: false,
      useSearchForm: false,
    },
    // pagination: false,
  });
  const [registerTable1, tableContext1] = tx1;
  const [registerTable2, tableContext2] = tx2;
  const [registerTable3, tableContext3, { rowSelection, selectedRows }] = tx3;
  const [registerModal1, modalContext1] = useModal();
  const [registerModal2, modalContext2] = useModal();
  const [registerModal3, modalContext3] = useModal();
  const [registerForm, formContext1] = useForm({
    showActionButtonGroup: false,
    schemas: taskschemas,
    labelWidth: 170,
  });

  const selectedRow = ref<any>({});

  // 任务编辑/新增
  function handleEdit(record) {
    modalContext1.openModal();
    nextTick(async () => {
      await formContext1.resetFields();
      await formContext1.setFieldsValue(record);
    });
  }

  // 任务删除
  function handleDelete({ id }) {
    deleteTeam({ id }).then(() => {
      message.success('删除成功');
    });
  }

  // 任务管理
  function handleManage(record) {
    selectedRow.value = record;
    modalContext3.openModal();
    nextTick(() => {
      tableContext3.clearSelectedRowKeys();
    });
  }

  // 详情管理
  function handleDetail(record) {
    selectedRow.value = record;
    modalContext2.openModal();
  }

  // 关联明细
  function handlePatch(mode) {
    // 过滤已选择条目，关联至其他任务的已经无法选中所以不做处理，关联至本任务的无法再添加，未关联的无法删除
    const addedRows = selectedRows.value.filter((e) => {
      return e.isSelect === true;
    });
    const otherRows = selectedRows.value.filter((e) => {
      return e.isSelect === false;
    });

    if (mode === 'add' && addedRows.length) {
      Modal.confirm({
        title: '确认',
        content: '您选择的条目含有已关联项，是否继续添加其他未关联项？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          patchConfirmHandler(otherRows, mode);
        },
      });
    } else if (mode === 'del' && otherRows.length) {
      Modal.confirm({
        title: '确认',
        content: '您选择的条目含有未关联项，是否继续删除其他已关联项？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          patchConfirmHandler(addedRows, mode);
        },
      });
    } else {
      patchConfirmHandler(selectedRows.value, mode);
    }
  }

  function patchConfirmHandler(rows, mode) {
    operateGasCheckTaskDetail({
      taskId: selectedRow.value.id,
      operateList: rows.map((e) => {
        return {
          deviceId: e.deviceId, //设备id（巡检地址id）
          checkNum: e.checkNum, //巡检次数
          operateType: mode, //操作类型，新增：add，删除：del
        };
      }),
    }).then(() => {
      message.success('操作成功');
      tableContext3.clearSelectedRowKeys();
      tableContext3.reload();
      tableContext1.reload();
    });
  }

  function handleSubmit() {
    formContext1.validate().then((formData) => {
      if (formData.id) {
        teamEdit(formData).then(() => {
          modalContext1.closeModal();
          tableContext1.reload();
        });
      } else {
        teamAdd(formData).then(() => {
          modalContext1.closeModal();
          tableContext1.reload();
        });
      }
    });
  }

  onMounted(() => {});
</script>

<style lang="less" scoped>
  @import '/@/design/theme.less';

  .gasReport {
    width: 100%;
    height: 100%;
    padding: 80px 10px 15px 10px;
    box-sizing: border-box;
    position: relative;
    color: var(--vent-font-color);

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

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

        .item-text {
          color: var(--vent-font-color);
        }
      }
    }

    .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: var(--vent-font-color) !important;
    }
  }
</style>