taskid:111 remark:"commit"

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

@@ -1,12 +1,147 @@
 <template>
-  <div class="detailTable">
+  <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" :model="searchFormState">
+        <a-form-item>
+          <a-input
+            style="width: 200px"
+            v-model:value="searchFormState.value"
+            placeholder="请输入账户类型" />
+        </a-form-item>
+        <a-form-item>
+          <a-select
+            ref="select"
+            v-model:value="searchFormState.value1"
+            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="searchFormState.value5"
+            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 class="total"> </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">新增</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 }">
+          <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>
+        </a-table>
+      </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="reportName">
+        <a-input v-model:value="formState.reportName" placeholder="请输入账户类型" />
+      </a-form-item>
+      <a-form-item ref="name" label="交易类型" name="reportName">
+        <a-cascader
+          v-model:value="formState.value"
+          :options="options"
+          placeholder="请选择交易类型" />
+      </a-form-item>
+      <a-form-item ref="name" label="交易日期" name="reportName">
+        <a-date-picker v-model:value="formState.value1" />
+      </a-form-item>
+      <a-form-item ref="name" label="交易数量" name="reportName">
+        <a-input v-model:value="formState.reportName" placeholder="请输入交易数量" />
+      </a-form-item>
+      <a-form-item ref="name" label="发生金额" name="reportName">
+        <a-input v-model:value="formState.reportName" placeholder="请输入发生金额" />
+      </a-form-item>
+      <a-form-item ref="name" label="交易对象" name="reportName">
+        <a-input v-model:value="formState.reportName" 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 } from 'vue';
+  import { ref, defineEmits } from 'vue';
   import { http } from '/nerv-lib/util/http';
+  import { UploadOutlined } from '@ant-design/icons-vue';
+  import type { UploadChangeParam } from 'ant-design-vue';
   defineOptions({
     energyType: 'carbonAssetsDetail', // 与页面路由name一致缓存才可生效
   });
@@ -16,13 +151,229 @@
   const fetch = (api, params = { orgId }) => {
     return http.post(api, params);
   };
+  // 查询部分变量
+  const searchFormState = ref({});
+  // 详情部分变量
+  const selectedRowKeys = ref([]);
+  const onSelectionChange = (selectedKeys, selectedRows) => {
+    selectedRowKeys.value = selectedKeys;
+  };
+  const columns = [
+    {
+      title: '序号',
+      customRender: (text: any) => {
+        return text.index + 1;
+      },
+    },
+    {
+      title: '资产类别',
+      dataIndex: 'name',
+    },
+    {
+      title: '交易方式',
+      dataIndex: 'name',
+    },
+    {
+      title: '交易日期',
+      dataIndex: 'age',
+      sorter: (a, b) => a.age - b.age,
+    },
+    {
+      title: '本期收入(tCO2)',
+      dataIndex: 'age',
+      sorter: (a, b) => a.age - b.age,
+    },
+    {
+      title: '本期支出(tCO2)',
+      dataIndex: 'age',
+      sorter: (a, b) => a.age - b.age,
+    },
+    {
+      title: '发生金额(￥）',
+      dataIndex: 'address',
+    },
+    {
+      title: '交易对象',
+      dataIndex: 'address',
+    },
+    {
+      title: '更新人',
+      dataIndex: 'address',
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'address',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 130,
+    },
+  ];
+  const data = [
+    {
+      key: '1',
+      name: 'John Brown',
+      age: 32,
+      address: 'New York No. 1 Lake Park',
+    },
+    {
+      key: '2',
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park',
+    },
+    {
+      key: '3',
+      name: 'Joe Black',
+      age: 32,
+      address: 'Sidney No. 1 Lake Park',
+    },
+    {
+      key: '4',
+      name: 'Jim Red',
+      age: 32,
+      address: 'London No. 2 Lake Park',
+    },
+  ];
+
+  // 新增相关数据
+  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',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+  // 定义form表单的必填
+  const rules: Record<string, Rule[]> = {
+    reportName: [{ required: true, message: '请输入报告名称', trigger: 'change' }],
+    reportYear: [{ required: true, message: '请选择报告年度', trigger: 'change' }],
+    genericStandard: [{ required: true, message: '请输入适用标准', trigger: 'change' }],
+    reportPeriod: [{ required: true, message: '请选择排放类型', trigger: 'change' }],
+    reportScope: [{ 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 {
-    height: 80%;
+    width: 65%;
+    margin-right: 20px;
+    height: 100%;
+    background: white;
+    border-radius: 12px;
   }
   .total {
-    height: 20%;
+    width: calc(35% - 20px);
+    height: 100%;
+    background: white;
+    border-radius: 12px;
   }
 </style>