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

<template>
  <div>
    <a-table 
      :columns="tableColumns" 
      :data-source="data" 
      bordered
      :pagination="false"
      :scroll="{ x: 2000 }">
      <template #bodyCell="{ column, text }">
        <template v-if="column.key === 'action'">
          <span>
            <a>编辑</a>
            <a-divider type="vertical" />
            <a>删除</a>
          </span>
        </template>
      </template>
      <template #title>
        <a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" />
        <div class="buttonGroup">
          <a-button type="primary" @click="addNewData">新增</a-button>
          <a-button type="primary">导入</a-button>
          <a-button type="primary">导出</a-button>
          <a-button type="primary">模板下载</a-button>
          <a-button type="primary">上传凭证</a-button>
          <a-button type="primary">凭证下载</a-button>
        </div>
      </template>
    </a-table>
      <a-pagination 
        :current="current"
        :total="total"
        :page-size="pageSize"
        style="display: flex;justify-content: center;margin-top: 16px;"
        :show-size-changer="true"
        :show-quick-jumper="true"
        @change="onChange" />
    <!-- 新增数据库数据 -->
    <a-drawer
      :width="500"
      :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-form-item ref="name" label="能源种类" name="energyType">
          <a-input v-model:value="formState.energyType" placeholder="请输入能源种类" />
        </a-form-item>
        <a-form-item label="计量单位" name="unit">
          <a-cascader v-model:value="formState.unit" :options="options" />
        </a-form-item>
        <a-form-item label="自动采集节点" name="collectionNode">
          <a-tree-select
            v-model:value="formState.collectionNode"
            :tree-line="true"
            :tree-data="treeData"
            tree-node-filter-prop="title"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="计算碳排" name="isComputeCarbon">
          <a-radio-group v-model:value="formState.isComputeCarbon" @change="changeRadio">
            <a-radio value="0">是</a-radio>
            <a-radio value="1">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="排放类型" name="emissionType">
          <a-select v-model:value="formState.emissionType" placeholder="请选择排放类型">
            <a-select-option value="直接排放">直接排放</a-select-option>
            <a-select-option value="间接排放">间接排放</a-select-option>
            <a-select-option value="其他">其他</a-select-option>
          </a-select>
        </a-form-item>
        <a-row>
          <a-col :span="24" style="display:flex;justify-content: space-around;">
            <a-form-item label="1月" name="janFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.janFlag" />
            </a-form-item>
            <a-form-item label="2月" name="febFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.febFlag" />
            </a-form-item>
            <a-form-item label="3月" name="marFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.marFlag" />
            </a-form-item>
          </a-col>
          <a-col :span="24" style="display:flex;justify-content: space-around;">
            <a-form-item label="4月" name="aprFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.aprFlag" />
            </a-form-item>
            <a-form-item label="5月" name="mayFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.mayFlag" />
            </a-form-item>
            <a-form-item label="6月" name="junFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.junFlag" />
            </a-form-item>
          </a-col>
          <a-col :span="24" style="display:flex;justify-content: space-around;">
            <a-form-item label="7月" name="julFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.julFlag" />
            </a-form-item>
            <a-form-item label="8月" name="augFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.augFlag" />
            </a-form-item>
            <a-form-item label="9月" name="sepFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.sepFlag" />
            </a-form-item>
          </a-col>
          <a-col :span="24" style="display:flex;justify-content: space-around;">
            <a-form-item label="10月" name="octFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.octFlag" />
            </a-form-item>
            <a-form-item label="11月" name="novFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.novFlag" />
            </a-form-item>
            <a-form-item label="12月" name="decFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
              <a-switch v-model:checked="formState.decFlag" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">确定</a-button>
      </template>
    </a-drawer>
  </div>
</template>
<script lang="ts" setup>
  import { ref,reactive, toRaw } from 'vue';
  import type { UnwrapRef } from 'vue';
  import type { Rule } from 'ant-design-vue/es/form';
  import { Pagination } from 'ant-design-vue';
  import type { CascaderProps,TreeSelectProps  } from 'ant-design-vue';
  import type { Dayjs } from 'dayjs';
  import { http } from '/nerv-lib/util/http';
  import { tableColumns } from '../config';
  import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
  defineOptions({
    energyType: 'EnergyConsumption', // 与页面路由name一致缓存才可生效
    components: {
      'a-pagination': Pagination,
    },
  });
  
  const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId;
  const fetch = (api, params = { orgId }) => {
    return http.post(api, params);
  };
  const selectYear = ref<Dayjs>();
  const current = ref<number>(1);
  const pageSize = ref<number>(10);
  const total = ref<number>()
  const queryParams = ref({
    pageNum:current.value,
    pageSize:pageSize.value,
  })
  const visible = ref(false);
  const data = ref([]);
  interface FormState {
    energyType: string;
    unit: string;
    collectionNode: string;
    emissionType: string | undefined;
    isComputeCarbon: string;
    janFlag: boolean;
    febFlag: boolean;
    marFlag: boolean;
    aprFlag: boolean;
    mayFlag: boolean;
    junFlag: boolean;
    julFlag: boolean;
    augFlag: boolean;
    sepFlag: boolean;
    octFlag: boolean;
    novFlag: boolean;
    decFlag: boolean;
  }
  const formRef = ref();
  const labelCol = { span: 5 };
  const wrapperCol = { span: 19 };
  const switchLabelCol = { span: 10 };
  const switchWrapperCol = { span: 14 };
  const formState: UnwrapRef<FormState> = reactive({
    energyType: '',
    unit: '',
    collectionNode: '',
    emissionType: undefined,
    isComputeCarbon: '',
    janFlag: false,
    febFlag: false,
    marFlag: false,
    aprFlag: false,
    mayFlag: false,
    junFlag: false,
    julFlag: false,
    augFlag: false,
    sepFlag: false,
    octFlag: false,
    novFlag: false,
    decFlag: false,
  });
  // 定义form表单的必填
  const rules: Record<string, Rule[]> = {
    energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
    isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', trigger: 'change' }],
    emissionType : [{ required: false, message: '请输入选择排放类型', trigger: 'change' }]
  };
  // 定义计量单位级联选择的变量
  const options: CascaderProps['options'] = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
            },
          ],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men',
            },
          ],
        },
      ],
    },
  ];
  // 定义自动采集节点数的变量
  const treeData = ref<TreeSelectProps['treeData']>([
    {
      title: 'parent 1',
      value: 'parent 1',
      children: [
        {
          title: 'parent 1-0',
          value: 'parent 1-0',
          children: [
            {
              title: 'my leaf',
              value: 'leaf1',
            },
            {
              title: 'your leaf',
              value: 'leaf2',
            },
          ],
        },
        {
          title: 'parent 1-1',
          value: 'parent 1-1',
        },
      ],
    },
  ]);
  // 年份选择改变触发
  const changeYearData = () => {
    queryParams.value.year = selectYear.value.format('YYYY')
    getTableList()
  }
  // 获取表格数据
  const getTableList = () => {
    fetch(energyConsumption.pageList , queryParams.value).then((res) => {
      data.value = res.data.records
      total.value = res.data.total
    });
  };
  getTableList()
  // 分页器
  const onChange = (pageNumber: number,size: number) => {
    current.value = pageNumber;
    pageSize.value = size;
  };
  // 计算碳排切换
  const changeRadio = (e) => {
    if(e.target.value==='0'){
      rules.emissionType.required = true
    }else{
      rules.emissionType.required = false
    }
    console.log(rules);
  };
  // 点击确定提交
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        console.log('values', formState, toRaw(formState));
      })
      .catch(error => {
        console.log('error', error);
      });
  };
  // 点击新增按钮
  const addNewData = () => {
    visible.value = true
  }
  // 关闭新增抽屉
  const onClose = () => {
    visible.value = false;
    formRef.value.resetFields();
  };
</script>
<style scoped lang="less">
  ::v-deep .ant-table-title{
    display: flex;
  }
  ::v-deep .ant-table-container{
    padding: 0px 16px;
  }
  .buttonGroup{
    margin-left: 1vw;
    width: 30vw;
    display: flex;
    justify-content: space-around;
  }
</style>
<style scoped>
  th.column-money,
  td.column-money {
    text-align: right !important;
  }
</style>