SaaS-lib/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/quickCalculation/index.vue

<template>
  <div class="main">
    <div class="left">
      <div class="top">
        <a-form style="width: 100%; margin: 0 auto">
          <div class="ns-form-title"><div class="title">因子分类</div></div>
          <div style="padding: 0 16px !important; width: 100%">
            <a-row>
              <a-col :span="24" style="margin-bottom: 16px">
                <a-input-search
                  v-model:value="searchValue"
                  placeholder="请输入关键词"
                  @search="onSearchTreeData" />
              </a-col>
            </a-row>
          </div>
        </a-form>
        <a-tree
          v-if="gData && gData.length > 0"
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :selectedKeys="selectedKeys"
          :tree-data="gData"
          show-line
          @expand="onExpand"
          @select="onSelect"
          style="padding: 0 16px !important">
          <template #title="data">
            <span
              v-if="data.energyType && searchValue && data.energyType.indexOf(searchValue) > -1">
              {{ data.energyType.substring(0, data.energyType.indexOf(searchValue)) }}
              <span style="color: #f50">{{ searchValue }}</span>
              {{
                data.energyType.substring(data.energyType.indexOf(searchValue) + searchValue.length)
              }}
            </span>
            <span v-else>{{ data.energyType }}</span>
          </template>
        </a-tree>
      </div>
    </div>
    <div class="right">
      <!-- <a-table 
        :columns="columns" 
        :data-source="tableData" 
        bordered
        :pagination="false">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'action'">
            <span>
              <a @click="editData(record)">编辑</a>
              <a-divider type="vertical" />
              <a @click="delData(record)">删除</a>
            </span>
          </template>
        </template>
        <template #title>
          <div class="ns-table-title"><span>排放因子库</span></div>
          <div class="buttonGroup">
            <a-button type="primary" @click="addNewData">新增</a-button>
          </div>
        </template>
      </a-table> -->
      <ns-view-list-table v-bind="tableConfig" :model="tableData" ref="mainRef" />
      <a-pagination
        :current="queryParams.pageNum"
        :total="total"
        :page-size="queryParams.pageSize"
        style="display: flex; justify-content: center; margin-top: 16px"
        :show-size-changer="true"
        :show-quick-jumper="true"
        @change="onChange" />
      <!-- 新增/编辑 -->
      <a-drawer
        :width="700"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }"
        destroyOnClose
        @close="onClose">
        <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol">
          <a-row>
            <a-col :span="12">
              <a-form-item ref="name" label="日期范围" name="dateRange">
                <a-range-picker
                  v-model:value="formState.dateRange"
                  picker="month"
                  valueFormat="YYYY-MM" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item ref="name" label="排放因子" name="emissionFactors">
                <ns-input v-model:value="formState.emissionFactors" disabled />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item ref="name" label="关键词">
                <ns-input v-model:value="selectData" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-table
          :columns="drawerColumns"
          :data-source="newTableData"
          bordered
          rowKey="id"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectionChange,
            type: 'radio',
          }"
          :pagination="false">
        </a-table>
        <template #footer>
          <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
          <a-button type="primary" @click="onSubmit">确定</a-button>
        </template>
      </a-drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, toRaw, defineExpose } from 'vue';
  import type { TreeProps } from 'ant-design-vue';
  import { Pagination, Modal } from 'ant-design-vue';
  import { columns, drawerColumns } from '../config';
  import { http } from '/nerv-lib/util/http';
  import {
    quickCalculation,
    carbonEmissionFactorLibrary,
  } from '/@/api/carbonEmissionFactorLibrary';
  import { or } from '@vueuse/core';
  defineOptions({
    energyType: 'quickCalculation', // 与页面路由name一致缓存才可生效
    components: {
      'a-pagination': Pagination,
    },
  });
  const orgId = ref('');
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;
  const fetch = (api, params = { orgId }) => {
    return http.post(api, params);
  };
  const mainRef = ref();
  // 数结构
  const x = 3;
  const y = 2;
  const z = 1;
  const genData: TreeProps['treeData'] = [];

  const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
    const preKey = _preKey || '0';
    const tns = _tns || genData;

    const children = [];
    for (let i = 0; i < x; i++) {
      const key = `${preKey}-${i}`;
      tns.push({ title: key, key });
      if (i < y) {
        children.push(key);
      }
    }
    if (_level < 0) {
      return tns;
    }
    const level = _level - 1;
    children.forEach((key, index) => {
      tns[index].children = [];
      return generateData(level, key, tns[index].children);
    });
  };
  generateData(z);

  const dataList: TreeProps['treeData'] = [];
  const generateList = (data: TreeProps['treeData']) => {
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      const key = node.key;
      dataList.push({ key, title: key });
      if (node.children) {
        generateList(node.children);
      }
    }
  };
  generateList(genData);

  const getParentKey = (
    key: string | number,
    tree: TreeProps['treeData'],
  ): string | number | undefined => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some((item) => item.key === key)) {
          parentKey = node.key;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };
  const expandedKeys = ref<(string | number)[]>(['0-0']);
  const selectedKeys = ref<string[]>(['0-0-0']);
  const searchValue = ref<string>('');
  const autoExpandParent = ref<boolean>(true);
  const gData = ref<TreeProps['treeData']>(genData);

  const onExpand = (keys: string[]) => {
    expandedKeys.value = keys;
    autoExpandParent.value = false;
  };
  // 被选中的树节点
  const energyType = ref();
  const onSelect = (selectedKey: string[], info: any) => {
    selectedKeys.value = selectedKey;
    if (info.selected) {
      energyType.value = info.node.id;
      statsId.value = info.node.id;
      mainRef.value?.nsTableRef.reload();
    }
  };

  watch(searchValue, (value) => {
    const expanded = dataList
      .map((item: TreeProps['treeData'][number]) => {
        if (item.title.indexOf(value) > -1) {
          return getParentKey(item.key, gData.value);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    expandedKeys.value = expanded;
    searchValue.value = value;
    autoExpandParent.value = true;
  });
  // 查询因子分类树数据
  const onSearchTreeData = () => {};
  const statsId = ref();
  // 获取因子分类树数据
  const getTreeData = () => {
    fetch(quickCalculation.carbonQuickTree, { orgId: orgId.value }).then((res) => {
      gData.value = res.data;
      energyType.value = gData.value[0].children[0].id;
      statsId.value = gData.value[0].children[0].id;
      mainRef.value?.nsTableRef.reload();
    });
  };
  getTreeData();
  // 列表数据
  const total = ref<number>();
  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    orgId: orgId.value,
  });
  const tableData = ref([]);

  const tableConfig = ref({
    title: '排放因子库',
    api: quickCalculation.queryCarbonEmissionPage,
    params: {
      orgId,
      energyType,
    },
    headerActions: [
      {
        label: '新增',
        name: 'userAdd',
        type: 'primary',
        handle: () => {
          visible.value = true;
          getNewTable();
        },
      },
    ],
    columns: [
      {
        title: '序号',
        customRender: (text: any) => {
          return text.index + 1;
        },
      },
      {
        title: '因子值',
        dataIndex: 'emissionFactors',
      },
      {
        title: '计量单位',
        className: 'carbonEmissionSuffix',
        dataIndex: 'carbonEmissionSuffix',
      },
      {
        title: '更新时间',
        className: 'updateTime',
        dataIndex: 'updateTime',
      },
      {
        title: '启用时间',
        className: 'startTime',
        dataIndex: 'startTime',
      },
      {
        title: '结束时间',
        className: 'endTime',
        dataIndex: 'endTime',
      },
      {
        title: '数据来源',
        className: 'dataSources',
        dataIndex: 'dataSources',
      },
    ],
    columnActions: {
      title: '操作',
      actions: [
        {
          label: '编辑',
          name: 'userEdit',
          handle: (record: any) => {
            selectedRowKeys.value = [record.factorId];
            formState.value.id = record.id;
            formState.value.emissionFactors = record.emissionFactors;
            formState.value.dateRange = [record.startTime, record.endTime];
            formState.value.factorId = record.factorId;
            visible.value = true;
            getNewTable();
          },
        },
        {
          label: '删除',
          name: 'userDelete',
          dynamicParams: { id: 'id' },
          confirm: true,
          isReload: true,
          api: quickCalculation.del,
        },
      ],
    },
    rowKey: 'id',
  });

  defineExpose({
    getTreeData,
  });
  // 获取列表数据
  const getTableList = () => {
    fetch(quickCalculation.queryCarbonEmissionPage, queryParams.value).then((res) => {
      tableData.value = res.data.records;
      total.value = res.data.total;
    });
  };
  // 分页器
  const onChange = (pageNumber: number, size: number) => {
    queryParams.value.pageNum = pageNumber;
    queryParams.value.pageSize = size;
    mainRef.value?.nsTableRef.reload();
  };
  // 新增/编辑
  const formRef = ref();
  const labelCol = { span: 6 };
  const wrapperCol = { span: 18 };
  const formState = ref({
    orgId: orgId.value,
  });
  const visible = ref(false);

  // 定义form表单的必填
  const rules: Record<string, Rule[]> = {
    dateRange: [{ required: true, message: '请选择日期范围', trigger: 'change' }],
    emissionFactors: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
  };
  // 点击新增按钮
  const addNewData = () => {
    visible.value = true;
    getNewTable();
  };
  // 获取新增页面的列表
  const selectedRowKeys = ref([]);
  const onSelectionChange = (selectedKeys, selectedRows) => {
    selectedRowKeys.value = selectedKeys;
    formState.value.emissionFactors = selectedRows[0].emissionFactors;
    formState.value.factorId = selectedRows[0].id;
  };
  const queryData = ref({
    orgId: orgId.value,
    pageNum: 1,
    pageSize: 999,
  });
  const newTableData = ref([]);
  const getNewTable = () => {
    fetch(carbonEmissionFactorLibrary.getTableList, queryData.value).then((res) => {
      newTableData.value = res.data.records;
    });
  };
  // 点击编辑按钮
  const editData = (record) => {
    selectedRowKeys.value = [record.factorId];
    formState.value.id = record.id;
    formState.value.emissionFactors = record.emissionFactors;
    formState.value.dateRange = [record.startTime, record.endTime];
    formState.value.factorId = record.factorId;
    visible.value = true;
    getNewTable();
  };
  // 点击确定提交
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        formState.value.statsId = statsId.value;
        formState.value.startTime = formState.value.dateRange[0];
        formState.value.endTime = formState.value.dateRange[1];
        console.log('values', formState, toRaw(formState));
        if (formState.value.id) {
          fetch(quickCalculation.update, formState.value).then((res) => {
            visible.value = false;
            selectedRowKeys.value = [];
            formState.value = {};
            formRef.value.resetFields();
            mainRef.value?.nsTableRef.reload();
          });
        } else {
          fetch(quickCalculation.creat, formState.value).then((res) => {
            visible.value = false;
            selectedRowKeys.value = [];
            formState.value = {};
            formRef.value.resetFields();
            mainRef.value?.nsTableRef.reload();
          });
        }
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  // 删除数据
  const delData = (record) => {
    Modal.confirm({
      title: '警告',
      content: '确定要删除吗?',
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        fetch(quickCalculation.del, { id: record.id }).then((res) => {
          message.success('操作成功！');
          getTableList();
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  // 关闭新增抽屉
  const onClose = () => {
    visible.value = false;
    selectedRowKeys.value = [];
    formState.value = {};
    formRef.value.resetFields();
  };
</script>

<style lang="less" scoped>
  .main {
    background-color: @ns-content-bg;
    display: flex;
    height: 100%;
  }
  .left {
    width: 300px;
    margin-right: @ns-gap;
    min-width: fit-content;
    > div {
      background-color: @white;
      flex: 1;
    }

    display: flex;
    flex-direction: column;
    .top {
      position: relative;
      .addTreeNode {
        width: 100%;
        padding: 16px;
        position: absolute;
        bottom: 0;
      }
    }
  }
  .right {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: #ffffff;
  }
  :deep(.ant-table-container) {
    padding: 0px 16px;
  }
  :deep(.ns-table-main) {
    margin-top: unset !important;
  }
  .top {
    overflow: auto;
  }
  .ns-form-title {
    font-weight: bold;
    user-select: text;
    padding: 16px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9e9e9;
  }
  .title {
    text-align: left;
    height: 32px;
    line-height: 32px;
    font-weight: bold;
    user-select: text;
    position: relative;
    padding-left: 9px;
  }
  .title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 13px;
    width: 3px;
    border-radius: 1px;
    background-color: #2778ff;
  }
  :deep(.ant-table-title) {
    display: flex;
    height: 100%;
    align-items: center;
  }
  .ns-table-title {
    font-weight: bold;
  }
  .buttonGroup {
    margin-left: 1vw;
    width: 5vw;
    display: flex;
    justify-content: space-around;
  }
</style>
<style scoped>
  th.column-money,
  td.column-money {
    text-align: right !important;
  }
</style>