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

<!-- @format -->

<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="selectTreeDataValue"
                  placeholder="请输入关键词"
                  @search="onSearchTreeData"
                />
              </a-col>
            </a-row>
          </div>
        </a-form>
        <a-tree
          v-if="gData && gData.length > 0"
          class="draggable-tree"
          style="padding: 0 16px !important;"
          draggable
          show-line
          checkable
          block-node
          :tree-data="gData"
          :checkedKeys="checkedTreeNodeKeys"
          :selectedKeys="selectedKeys"
          @dragenter="onDragEnter"
          @drop="onDrop"
          @check="checkTreeNode"
          @select="onSelect"
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          @expand="onExpand">
           <template #title="{ emissionName }">
            <span v-if="emissionName && selectTreeDataValue && emissionName.indexOf(selectTreeDataValue) > -1">
              {{ emissionName.substring(0, emissionName.indexOf(selectTreeDataValue)) }}
              <span style="color: #f50">{{ selectTreeDataValue }}</span>
              {{ emissionName.substring(emissionName.indexOf(selectTreeDataValue) + selectTreeDataValue.length) }}
            </span>
            <span v-else>{{ emissionName }}</span>
          </template>
        </a-tree>
        <a-popover v-if="showOperation" placement="rightTop" trigger="focus">
          <template #content>
            <div style="display: flex;flex-direction: column;">
              <a-button type="text" @click="editTreeNodeData">编辑</a-button>
              <a-button type="text" @click="addTreeNodeData">新增子节点</a-button>
              <a-button type="text">上移</a-button>
              <a-button type="text">下移</a-button>
              <a-button type="text" @click="deleteTreeNode">删除</a-button>
            </div>
          </template>
          <MoreOutlined style="position: absolute;right: 0;top: 16%;font-size: 25px;cursor: pointer;" />
        </a-popover>
        <div class="addTreeNode">
          <a-button type="primary" style="width:100%;" @click="addTreeNodeData">新增</a-button>
        </div>
      </div>
    </div>
    <div class="right">
      <ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" :scroll="{ x: 2000}"/>
    </div>
    <!-- 新增树节点 -->
    <ns-modal :visible="treeNodeAdd" :title="operationTree" @ok="handleOk" @cancel="handleCancel">
      <ns-input
        v-model:value="addTreeNode"
        class="input"
        placeholder="请输入排放类型"/>
    </ns-modal>
    <!-- 新增数据库数据 -->
    <a-drawer
      :width="500"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      destroyOnClose
      @close="onClose">
      <ns-form
        ref="formRef"
        :schemas="formSchema"
        :model="formData"
        class="form"
        :wrapperCol="{ span: 20 }"
        formLayout="vertical" />
      <template #footer>
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onEdit">确定</a-button>
      </template>
    </a-drawer>
  </div>
</template>
<script lang="ts" setup>
  import { MoreOutlined,ExclamationCircleOutlined  } from '@ant-design/icons-vue';
  import { Modal } from 'ant-design-vue';
  import { computed, createVNode, defineComponent, reactive, ref, watchEffect,watch } from 'vue';
  import { http } from '/nerv-lib/util/http';
  import { NsMessage, NsModal } from '/nerv-lib/component';
  import { formConfig, formConfig2 } from './config';
  import { carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary';
  import type {
    AntTreeNodeDragEnterEvent,
    AntTreeNodeDropEvent,
    TreeProps,
  } from 'ant-design-vue/es/tree';
import { log } from 'node:console';

  defineOptions({ name: 'OrderListIndex' });
  const selectTreeDataValue = ref<string>('');
  const mainRef = ref();
  const data = reactive({});
  let formData = ref({});
  const formRef = ref();
  const visible = ref(false);
  const searchValue = ref<string>('');
  const searchValue2 = ref<string>('');
  const disabled = ref(false);
  const treeNodeAdd = ref<boolean>(false);
  const operationTree = ref<string>('新增');
  const showOperation = ref(false)

  const opMap: any = ref({
    type: 'add',
    fuc: () => {},
    record: {},
  });
  watchEffect(() => {
    disabled.value = opMap.value.type === 'edit';
  });
  const formSchema = formConfig(disabled);
  const casData = ref([]);
  const treeData = ref([]);
  const userAuthList = ref([]);
  const orgId = ref('');
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;
  const dynamicDisabled = computed(() => {
    return formRef.value?.validateResult && userAuthList.value?.length;
  });
  const fetch = (api, params = { orgId }) => {
    return http.post(api, params);
  };

  // 树结构
  const x = 3;
  const y = 2;
  const z = 1;
  const genData: TreeProps['treeData'] = [];
  const checkedTreeNodeKeys = ref<string[]>(['0-0']);

  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);
  type TreeDataItem = TreeProps['treeData'][number];
  const gData = ref<TreeProps['treeData']>(genData);
  const onDragEnter = (info: AntTreeNodeDragEnterEvent) => {
    console.log(info);
    // expandedKeys 需要展开时
    // expandedKeys.value = info.expandedKeys;
  };

  const onDrop = (info: AntTreeNodeDropEvent) => {
    console.log(info);
    const dropKey = info.node.key;
    const dragKey = info.dragNode.key;
    const dropPos = info.node.pos.split('-');
    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
    const loop = (data: TreeProps['treeData'], key: string | number, callback: any) => {
      data.forEach((item, index) => {
        if (item.key === key) {
          return callback(item, index, data);
        }
        if (item.children) {
          return loop(item.children, key, callback);
        }
      });
    };
    const data = [...gData.value];

    // Find dragObject
    let dragObj: TreeDataItem;
    loop(data, dragKey, (item: TreeDataItem, index: number, arr: TreeProps['treeData']) => {
      arr.splice(index, 1);
      dragObj = item;
    });
    if (!info.dropToGap) {
      // Drop on the content
      loop(data, dropKey, (item: TreeDataItem) => {
        item.children = item.children || [];
        /// where to insert 示例添加到头部，可以是随意位置
        item.children.unshift(dragObj);
      });
    } else if (
      (info.node.children || []).length > 0 && // Has children
      info.node.expanded && // Is expanded
      dropPosition === 1 // On the bottom gap
    ) {
      loop(data, dropKey, (item: TreeDataItem) => {
        item.children = item.children || [];
        // where to insert 示例添加到头部，可以是随意位置
        item.children.unshift(dragObj);
      });
    } else {
      let ar: TreeProps['treeData'] = [];
      let i = 0;
      loop(data, dropKey, (_item: TreeDataItem, index: number, arr: TreeProps['treeData']) => {
        ar = arr;
        i = index;
      });
      if (dropPosition === -1) {
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
      }
    }
    gData.value = data;
  };
  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)[]>([]);
  const autoExpandParent = ref<boolean>(true);

  const onExpand = (keys: string[]) => {
    expandedKeys.value = keys;
    autoExpandParent.value = false;
  };
  watch(selectTreeDataValue, 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;
    selectTreeDataValue.value = value;
    autoExpandParent.value = true;
  });
  // 筛选树结构中的数据
  const onSearchTreeData = (selectTreeDataValue: string) => {
    console.log('use value', selectTreeDataValue);
    console.log('or use this.value', value.value);
  };
  // 点击数据点的复选框
  const checkedIds = ref([])
  const emissionType = ref()
  const checkTreeNode = (checkedKeys, info) => {
    checkedTreeNodeKeys.value = checkedKeys
    checkedIds.value = []
    info.checkedNodes.forEach(item=>{
      checkedIds.value.push(item.id)
    })
    sessionStorage.setItem('checkedTreeNode', checkedIds.value);
    emissionType.value = checkedIds.value.join(',')
    mainRef.value?.nsTableRef.reload();
  }
  // 点击新增树节点
  const addTreeNodeData = () => {
    operationTree.value='新增'
    treeNodeAdd.value = true;
    editTreeNode.value.type = 'create'
  };
  // 编辑树节点
  const editTreeNodeData = () => {
    operationTree.value='编辑'
    treeNodeAdd.value = true;
    editTreeNode.value.type = 'update'
  }
  // 删除树节点
  const deleteTreeNode = () => {
    Modal.confirm({
    title: '警告',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确定要删除么？',
    okText: '确认',
    okType: 'primary',
    cancelText: '取消',
    onOk() {
      http.post(carbonEmissionFactorLibrary.delTreeNode,editTreeNode.value).then(() => {
        getOrgTree()
        NsMessage.success('操作成功');
      });
    },
    onCancel() {
      console.log('Cancel');
    },
  });
  }
  // 新增/编辑树节点点击确定
  const addTreeNode =ref()
  const handleOk = (e: MouseEvent) => {
    editTreeNode.value.emissionName = addTreeNode.value
    http.post(carbonEmissionFactorLibrary.creat,editTreeNode.value).then(() => {
      getOrgTree()
      NsMessage.success('操作成功');
      addTreeNode.value = ''
      treeNodeAdd.value = false;
    });
  };
  const handleCancel = () => {
    addTreeNode.value = ''
    treeNodeAdd.value = false;
  };
  // 获取排放分类树
  const getOrgTree = (params?) => {
    fetch(carbonEmissionFactorLibrary.getCarbonFactorTree, params).then((res) => {
      gData.value = res.data
      // 找到匹配的节点数据
      const selectedNodes = [];
      checkedTreeNodeKeys.value.forEach(key => {
        const [parentId, childId] = key.split('-').map(Number);
        if (parentId >= 0 && childId >= 0 && gData.value[parentId]?.children?.[childId]) {
          selectedNodes.push(gData.value[parentId]);
        }
      });
      // 获取默认选中节点的所有id
      getDefaultIds(selectedNodes)
    });
  };
  const defaultIds = ref([])
  const getDefaultIds = (selectedNodes) => {
    selectedNodes.forEach(items => {
      defaultIds.value.push(items.id)
      if(items.children){
        getDefaultIds(items.children)
      }
    })
    emissionType.value = defaultIds.value.join(',')
    checkedIds.value = defaultIds.value
    sessionStorage.setItem('checkedTreeNode', checkedIds.value);
  }
  getOrgTree();
  // 被选中的树节点
  const editTreeNode = ref({})
  const onSelect = (selectedKeys: string[], info: any) => {
    if(info.selected){
      showOperation.value = true
      editTreeNode.value = {
        id:info.selectedNodes[0].id,
        level:info.selectedNodes[0].level,
        dataNumber:info.selectedNodes[0].dataNumber,
        sortNumber:info.selectedNodes[0].sortNumber,
        parentEmissionId:info.selectedNodes[0].parentEmissionId,
      }
    }
  };

  const onSearch = () => {
    console.log(searchValue.value);
    getOrgTree({ orgName: searchValue.value, orgId });
  };

  const tableFetch = (params) => {
    console.log(params, 'sdfasfasdfasdfasdf');

    tableConfig.value.params = {
      ...mainRef.value.params,
      ...params,
    };

    setTimeout(() => {
      mainRef.value?.nsTableRef.reload();
    }, 100);
  };

  const handleSelect = (selectedKeys: any, info: any) => {
    fetch(carbonEmissionFactorLibrary.queryDeptTree, { orgId: info.node?.orgInfo.orgId }).then((res) => {
      treeData2.value = res.data;
    });
    tableFetch({ orgId: info.node?.orgInfo.orgId });
  };


  const onClose = () => {
    visible.value = false;
    formData.value = {};
    userAuthList.value.splice(0);
  };

  const onEdit = () => {
    formRef.value?.triggerSubmit().then(() => {
      console.log(formData.value, 'formData.value');
      // if (!userAuthList.value.length) {
      //   NsMessage.error('请添加用户权限');
      //   return;
      // }

      opMap.value.fuc &&
        opMap.value.fuc({ ...formData.value });
    });
  };
  const tableConfig = ref({
    title: '数据库',
    api: carbonEmissionFactorLibrary.getTableList,
    params: {
      orgId,
      emissionType
    },
    headerActions: [
      {
        label: '新增',
        name: 'userAdd',
        type: 'primary',
        handle: () => {
          opMap.value.type = 'add';
          setTimeout(() => {
            formData.value = {
              carbonEmissionPrefix:'t',
              numberOfReferences:'10'
            };
            userAuthList.value.splice(0);
          });
          opMap.value.fuc = (formData: any) => {
            formData.emissionType = formData.emissionType[formData.emissionType.length - 1]
            return http.post(carbonEmissionFactorLibrary.creatOrUpdate, formData).then(() => {
              mainRef.value?.nsTableRef.reload();
              visible.value = false;
              NsMessage.success('操作成功');
            });
          };
          visible.value = true;
        },
      },
      {
        label: '导入',
        type: 'primary',
        name: 'userImport',
        handle: () => {},
      },
      {
        label: '导出',
        type: 'primary',
        name: 'userExports',
      },
      {
        label: '批量删除',
        type: 'primary',
        name: 'userBatchDel',
        dynamicDisabled: (data: any) => {
          return data.list.length === 0;
        },
        confirm: true,
        isReload: true,
        isClearCheck: true,
        api: carbonEmissionFactorLibrary.del,
        dynamicParams: { ids: 'id[]' },
      },
    ],
    columns: [
      {
        title: 'id',
        customRender: (text: any) => {
          return text.index + 1;
        },
      },
      {
        title: '排放源',
        dataIndex: 'emissionSources',
      },
      {
        title: '排放类型',
        dataIndex: 'emissionTypeColumn',
      },
      {
        title: '排放气体',
        dataIndex: 'emissionGas',
      },
      {
        title: '排放环节',
        dataIndex: 'emissionProcess',
      },
      {
        title: '排放因子',
        dataIndex: 'emissionFactors',
      },
      {
        title: '排放因子单位',
        dataIndex: 'emissionFactorUnits',
      },
      {
        title: '数据来源',
        dataIndex: 'dataSources',
      },
      {
        title: '数据库',
        dataIndex: 'carbonDatabase',
      },
      {
        title: '参考文献',
        dataIndex: 'reference',
      },
      {
        title: '引用数量',
        dataIndex: 'numberOfReferences',
      },
    ],
    columnActions: {
      title: '操作',
      actions: [
        {
          label: '编辑',
          name: 'userEdit',
          handle: (record: any) => {
            userAuthList.value.splice(0);
            setTimeout(() => {
              console.log(record.id);
              
              http.post(carbonEmissionFactorLibrary.findById,{ id: record.id } ).then((res) => {
                formData.value = res.data;
              });
            }, 10);
            opMap.value.type = 'edit';
            opMap.value.fuc = (formData: any) => {
              return http.post(carbonEmissionFactorLibrary.creatOrUpdate, formData).then(() => {
                mainRef.value?.nsTableRef.reload();
                visible.value = false;
                NsMessage.success('操作成功');
              });
            };
            visible.value = true;
          },
        },
        {
          label: '删除',
          name: 'userDelete',
          dynamicParams: { ids: 'id[]' },
          confirm: true,
          isReload: true,
          api: carbonEmissionFactorLibrary.del,
        },
      ],
    },

    formConfig: {
      schemas: [
        {
          field: 'emissionSources',
          label: '排放源',
          component: 'NsInput',
          componentProps: {
            placeholder: '请输入排放源',
            maxLength: 30,
          },
        },
        {
          field: 'emissionProcess',
          label: '排放环节',
          component: 'NsSelect',
          componentProps: {
            allowClear: true,
            placeholder: '请选择排放环节',
            options: [
              {
                label: '消费环节',
                value: 0,
              }
            ],
          },
        },
        {
          field: 'emissionGas',
          label: '排放气体',
          component: 'NsSelect',
          componentProps: {
            allowClear: true,
            placeholder: '请选择排放气体',
            options: [
              {
                label: 'CO2',
                value: 'CO2',
              },
              {
                label: 'CO2e',
                value: 'CO2e',
              },
              {
                label: 'SF6',
                value:'SF6',
              },
              {
                label: 'CH4',
                value: 'CH4',
              },
              {
                label: 'PFCs',
                value: 'PFCs',
              },
              {
                label: 'HFCs',
                value: 'HFCs',
              },
            ],
          },
        },
        {
          field: 'carbonDatabase',
          label: '数据库名称',
          component: 'NsSelect',
          componentProps: {
            allowClear: true,
            placeholder: '请选择数据库名称',
            showSearch: true,
            options: [
              {
                label: '正常',
                value: '正常',
              },
              {
                label: '冻结',
                value: '冻结',
              },
            ],
          },
        },
        {
          field: 'reference',
          label: '文献关键字',
          component: 'NsInput',
          componentProps: {
            placeholder: '请输入文献关键字',
            maxLength: 30,
          },
        },
      ],
      params: {},
    },
    // pagination: { defaultPageSize: 10 },
    rowKey: 'id',
  });
</script>
<style lang="less" scoped>
  .main {
    background-color: @ns-content-bg;
    display: flex;
  }
  .left {
    width: 300px;
    // max-height: calc(100vh - 96px);
    margin-right: @ns-gap;
    min-width: fit-content;
    > div {
      border-radius: @ns-border-radius;
      background-color: @white;
      // box-shadow: @ns-content-box-shadow;
      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;
  }
  .top {
    overflow: auto;
    // height: 50%;
    // border-bottom: 5px solid rgb(229, 235, 240);
    // overflow-y: auto;
  }
  .ns-form-title{
    font-weight: bold;
    user-select: text;
    padding: 16px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9e9e9;
  }
</style>