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

<template>
  <div class="search">
    <a-card style="border-radius: 12px">
      <div class="ns-form-title">
        <div class="title">查询</div>
        <div class="operation">
          <a-button type="primary" @click="changeParentData"> 返回 </a-button>
        </div>
      </div>
      <a-form layout="inline">
        <a-form-item>
          <a-input
            style="width: 200px"
            v-model:value="queryParams.accountType"
            placeholder="请输入账户类型" />
        </a-form-item>
        <a-form-item>
          <a-select
            ref="select"
            v-model:value="queryParams.transactionType"
            style="width: 200px"
            placeholder="请选择交易类型"
            @focus="focus"
            @change="handleChange">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-date-picker
            style="width: 200px"
            v-model:value="queryParams.transactionDate"
            placeholder="请选择账期"
            picker="year" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary">查询</a-button>
          <a-button html-type="submit" style="margin-left: 6px">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
  <div style="display: flex; margin-top: 20px; height: calc(84% - 20px)">
    <div class="detailTable">
      <a-card>
        <div class="ns-form-title">
          <div class="title">交易明细</div>
          <div class="operation">
            <a-button type="primary" @click="addDetail">新增</a-button>
            <a-button type="primary" style="margin-left: 6px">导入</a-button>
            <a-button type="primary" style="margin-left: 6px">导出</a-button>
            <a-button type="primary" style="margin-left: 6px">批量删除</a-button>
          </div>
        </div>
        <a-table
          :columns="columns"
          :data-source="data"
          @change="onChange"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectionChange,
          }"
          :scroll="{ x: 1500, y: 400 }"
          :pagination="false">
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'accountType'">
              <span v-if="record.accountType">{{ record.accountType.label }}</span>
            </template>
            <template v-if="column.key === 'action'">
              <span>
                <a @click="editData(record)">编辑</a>
                <a-divider type="vertical" />
                <a @click="delData(record)">删除</a>
              </span>
            </template>
          </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-card>
    </div>
    <div class="total">
      <a-table :columns="totalColumns" :data-source="totalData" bordered :pagination="false">
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'name'">
            <a>{{ text }}</a>
          </template>
        </template>
      </a-table>
    </div>
  </div>
  <!-- 新增报告弹窗 -->
  <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="accountType">
        <a-input v-model:value="formState.accountType" placeholder="请输入账户类型" />
      </a-form-item>
      <a-form-item ref="name" label="交易类型" name="transactionType">
        <a-cascader
          v-model:value="formState.transactionType"
          :options="options"
          placeholder="请选择交易类型" />
      </a-form-item>
      <a-form-item ref="name" label="交易日期" name="transactionDate">
        <a-date-picker v-model:value="formState.transactionDate" valueFormat="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item ref="name" label="交易数量" name="transactionQuantity">
        <a-input v-model:value="formState.transactionQuantity" placeholder="请输入交易数量" />
      </a-form-item>
      <a-form-item ref="name" label="发生金额" name="amountIncurredValue">
        <a-input v-model:value="formState.amountIncurredValue" placeholder="请输入发生金额" />
      </a-form-item>
      <a-form-item ref="name" label="交易对象" name="tradingPartner">
        <a-input v-model:value="formState.tradingPartner" placeholder="请输入交易对象" />
      </a-form-item>
      <a-upload
        v-model:file-list="fileList"
        name="file"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :headers="headers"
        @change="handleChange">
        <a-button>
          <upload-outlined></upload-outlined>
          点击上传凭证
        </a-button>
      </a-upload>
    </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>
</template>

<script lang="ts" setup>
  import { ref, defineEmits, toRaw } from 'vue';
  import { http } from '/nerv-lib/util/http';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import type { UploadChangeParam } from 'ant-design-vue';
  import { Pagination, Modal, message } from 'ant-design-vue';
  import { carbonAssetsDetail } from '/@/api/carbonEmissionFactorLibrary';
  defineOptions({
    energyType: 'carbonAssetsDetail', // 与页面路由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 selectedRowKeys = ref([]);
  const onSelectionChange = (selectedKeys, selectedRows) => {
    selectedRowKeys.value = selectedKeys;
  };
  const total = ref<number>();
  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    orgId: orgId.value,
  });
  // 获取左侧列表数据
  const getDetailList = () => {
    fetch(carbonAssetsDetail.carbonDetailsList, queryParams.value).then((res) => {
      data.value = res.data.records;
    });
  };
  getDetailList();
  const columns = [
    {
      title: '序号',
      customRender: (text: any) => {
        return text.index + 1;
      },
    },
    {
      title: '资产类别',
      dataIndex: 'accountType',
    },
    {
      title: '交易方式',
      dataIndex: 'transactionTypeName',
    },
    {
      title: '交易日期',
      dataIndex: 'transactionDate',
      sorter: (a, b) => a.transactionDate - b.transactionDate,
    },
    {
      title: '本期收入(tCO2)',
      dataIndex: 'income',
      sorter: (a, b) => a.income - b.income,
    },
    {
      title: '本期支出(tCO2)',
      dataIndex: 'expenditure',
      sorter: (a, b) => a.expenditure - b.expenditure,
    },
    {
      title: '发生金额(￥）',
      dataIndex: 'amountIncurredValue',
    },
    {
      title: '交易对象',
      dataIndex: 'tradingPartner',
    },
    {
      title: '更新人',
      dataIndex: 'updateUser',
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
    },
    {
      title: '操作',
      key: 'action',
      width: 130,
    },
  ];
  const data = ref([]);
  const editData = (record) => {
    visible.value = true;
    formState.value.id = record.id;
    formState.value = record;
  };
  const delData = (record) => {
    Modal.confirm({
      title: '警告',
      content: '确定要删除吗?',
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        fetch(carbonAssetsDetail.delete, { id: record.id }).then((res) => {
          message.success('操作成功！');
          getDetailList();
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  // 分页器
  const onChange = (pageNumber: number, size: number) => {
    queryParams.value.pageNum = pageNumber;
    queryParams.value.pageSize = size;
    getDetailList();
  };
  // 新增相关数据
  const visible = ref(false);
  const formState = ref({});
  const formRef = ref();
  const labelCol = { span: 5 };
  const wrapperCol = { span: 19 };
  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 addDetail = () => {
    visible.value = true;
  };
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        console.log('values', formState, toRaw(formState));
        fetch(carbonAssetsDetail.createOrUpdate, formState.value).then((res) => {
          message.success('操作成功！');
          getDetailList();
        });
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  // 定义form表单的必填
  const rules: Record<string, Rule[]> = {
    accountType: [{ required: true, message: '请输入账户类型', trigger: 'change' }],
    transactionType: [{ required: true, message: '请选择交易类型', trigger: 'change' }],
    transactionDate: [{ required: true, message: '请选择交易日期', trigger: 'change' }],
    transactionQuantity: [{ required: true, message: '请输入交易数量', trigger: 'change' }],
    amountIncurredValue: [{ required: true, message: '请输入发生金额', trigger: 'change' }],
    tradingPartner: [{ required: true, message: '请输入交易对象', trigger: 'change' }],
  };
  // 关闭新增抽屉
  const onClose = () => {
    visible.value = false;
    formState.value = {};
    formRef.value.resetFields();
  };
  // 统计表格
  const totalColumns = [
    {
      title: '统计类型',
      dataIndex: 'name',
    },
    {
      title: '小计',
      dataIndex: 'name',
    },
    {
      title: '合计',
      dataIndex: 'name',
    },
  ];

  const totalData = [
    {
      key: '1',
      total: '0',
      name: 'John',
      money: '￥300,000.00',
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim',
      money: '￥1,256,000.00',
      address: 'London No. 1 Lake Park',
    },
  ];
  // 点击返回
  const emit = defineEmits(['change-data']);
  const changeParentData = () => {
    emit('change-data', true);
  };
</script>

<style lang="less" scoped>
  .ns-form-title {
    font-weight: bold;
    user-select: text;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  .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-card-body) {
    padding: 16px;
  }
  .search {
    height: 16%;
  }
  .detailTable {
    width: 65%;
    margin-right: 20px;
    height: 100%;
    background: white;
    border-radius: 12px;
  }
  .total {
    width: calc(35% - 20px);
    height: 100%;
    background: white;
    border-radius: 12px;
  }
</style>