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"><span>因子分类</span></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>
      <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 } 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';
  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 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 onSelect = (selectedKey: string[], info: any) => {
    selectedKeys.value = selectedKey; 
    if(info.selected){
      queryParams.value.energyType = info.node.id
      statsId.value = info.node.id
      getTableList()
    }
  };

  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).then((res) => {
      gData.value = res.data
      debugger
      queryParams.value.energyType = gData.value[0].children[0].id
      statsId.value = gData.value[0].children[0].id
      getTableList()
    });
  };
  getTreeData()
  // 列表数据
  const total = ref<number>()
  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    orgId: orgId.value
  })
  const tableData = ref([]);
  // 获取列表数据
  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;
    getTableList()
  };
  // 新增/编辑
  const formRef = ref();
  const labelCol = { span: 6 };
  const wrapperCol = { span: 18 };
  const formState = ref({})
  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.carbonId = 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.carbonId];
    formState.value.id = record.id
    formState.value.emissionFactors = record.emissionFactors
    formState.value.dateRange = [record.startTime, record.endTime];
    formState.value.carbonId = record.carbonId
    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));
        debugger
        if(formState.value.id){
          fetch(quickCalculation.update,formState.value).then((res) => {
            visible.value = false
            selectedRowKeys.value = [];
            formState.value = {}
            formRef.value.resetFields();
            getTableList()
          });
        }else{
          fetch(quickCalculation.creat,formState.value).then((res) => {
            visible.value = false
            selectedRowKeys.value = [];
            formState.value = {}
            formRef.value.resetFields();
            getTableList()
          });
        }
      })
      .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;
  }
  ::v-deep .ant-table-container{
    padding: 0px 16px;
  }
  .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;
  }
  ::v-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>