taskId:083 remark:'commit'

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

@@ -6,12 +6,12 @@
       bordered
       :pagination="false"
       :scroll="{ x: 2000 }">
-      <template #bodyCell="{ column, text }">
+      <template #bodyCell="{ column, text, record }">
         <template v-if="column.key === 'action'">
           <span>
-            <a>编辑</a>
+            <a @click="editData(record)">编辑</a>
             <a-divider type="vertical" />
-            <a>删除</a>
+            <a @click="delData(record)">删除</a>
           </span>
         </template>
       </template>
@@ -22,15 +22,15 @@
           <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" @click="uploadVoucher">上传凭证</a-button>
           <a-button type="primary">凭证下载</a-button>
         </div>
       </template>
     </a-table>
       <a-pagination 
-        :current="current"
+        :current="queryParams.pageNum"
         :total="total"
-        :page-size="pageSize"
+        :page-size="queryParams.pageSize"
         style="display: flex;justify-content: center;margin-top: 16px;"
         :show-size-changer="true"
         :show-quick-jumper="true"
@@ -67,60 +67,60 @@
         </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 :value="0">是</a-radio>
+            <a-radio :value="1">否</a-radio>
           </a-radio-group>
         </a-form-item>
-        <a-form-item label="排放类型" name="emissionType">
+        <a-form-item label="排放类型" name="emissionType" :required="isRequired">
           <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-option v-for="(item, index) in emissionTypeDic" :key="index" :value="item.cnValue">
+              {{ item.cnValue }}
+            </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-switch v-model:checked="formState.janFlag" :checked-value="1" :unCheckedValue="0" />
             </a-form-item>
             <a-form-item label="2月" name="febFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
-              <a-switch v-model:checked="formState.febFlag" />
+              <a-switch v-model:checked="formState.febFlag" :checked-value="1" :unCheckedValue="0" />
             </a-form-item>
             <a-form-item label="3月" name="marFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
-              <a-switch v-model:checked="formState.marFlag" />
+              <a-switch v-model:checked="formState.marFlag" :checked-value="1" :unCheckedValue="0" />
             </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-switch v-model:checked="formState.aprFlag" :checked-value="1" :unCheckedValue="0" />
             </a-form-item>
             <a-form-item label="5月" name="mayFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
-              <a-switch v-model:checked="formState.mayFlag" />
+              <a-switch v-model:checked="formState.mayFlag" :checked-value="1" :unCheckedValue="0" />
             </a-form-item>
             <a-form-item label="6月" name="junFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
-              <a-switch v-model:checked="formState.junFlag" />
+              <a-switch v-model:checked="formState.junFlag" :checked-value="1" :unCheckedValue="0" />
             </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-switch v-model:checked="formState.julFlag" :checked-value="1" :unCheckedValue="0" />
             </a-form-item>
             <a-form-item label="8月" name="augFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
-              <a-switch v-model:checked="formState.augFlag" />
+              <a-switch v-model:checked="formState.augFlag" :checked-value="1" :unCheckedValue="0" />
             </a-form-item>
             <a-form-item label="9月" name="sepFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
-              <a-switch v-model:checked="formState.sepFlag" />
+              <a-switch v-model:checked="formState.sepFlag" :checked-value="1" :unCheckedValue="0" />
             </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-switch v-model:checked="formState.octFlag" :checked-value="1" :unCheckedValue="0" />
             </a-form-item>
             <a-form-item label="11月" name="novFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
-              <a-switch v-model:checked="formState.novFlag" />
+              <a-switch v-model:checked="formState.novFlag" :checked-value="1" :unCheckedValue="0" />
             </a-form-item>
             <a-form-item label="12月" name="decFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol">
-              <a-switch v-model:checked="formState.decFlag" />
+              <a-switch v-model:checked="formState.decFlag" :checked-value="1" :unCheckedValue="0" />
             </a-form-item>
           </a-col>
         </a-row>
@@ -130,38 +130,61 @@
         <a-button type="primary" @click="onSubmit">确定</a-button>
       </template>
     </a-drawer>
+    <!-- 上传凭证弹窗 -->
+    <a-modal :visible="openUpload" title="凭证上传" @ok="handleOk" @cancel="closeOpenUpload">
+      <a-upload-dragger
+        v-model:fileList="fileList"
+        name="file"
+        :multiple="true"
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        @change="handleChange"
+        @drop="handleDrop"
+      >
+        <p class="ant-upload-drag-icon">
+          <inbox-outlined></inbox-outlined>
+        </p>
+        <p class="ant-upload-hint" style="display: flex;flex-direction: column;">
+          <p>1.仅支持pdf格式文件或文件夹</p>
+          <p>2.文件命名规则为【能源种类_年份】</p>
+          <p>3.每次上传自动覆盖</p>
+        </p>
+      </a-upload-dragger>
+    </a-modal>
   </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 { Pagination,message,Modal   } from 'ant-design-vue';
+  import { InboxOutlined } from '@ant-design/icons-vue';
+  import type { CascaderProps,TreeSelectProps,UploadChangeParam } 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';
+  import { dict } from '/@/api';
   defineOptions({
     energyType: 'EnergyConsumption', // 与页面路由name一致缓存才可生效
     components: {
       'a-pagination': Pagination,
     },
   });
-  
-  const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId;
-  const fetch = (api, params = { orgId }) => {
+  const orgId = ref('');
+  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
+  orgId.value = result;
+  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,
+    pageNum: 1,
+    pageSize: 10,
   })
+  const isRequired = ref(false);
   const visible = ref(false);
+  const openUpload = ref<boolean>(false);
   const data = ref([]);
   interface FormState {
     energyType: string;
@@ -169,48 +192,29 @@
     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;
+    janFlag: string;
+    febFlag: string;
+    marFlag: string;
+    aprFlag: string;
+    mayFlag: string;
+    junFlag: string;
+    julFlag: string;
+    augFlag: string;
+    sepFlag: string;
+    octFlag: string;
+    novFlag: string;
+    decFlag: string;
   }
   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,
-  });
+  const formState = ref({})
   // 定义form表单的必填
   const rules: Record<string, Rule[]> = {
     energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
-    isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', trigger: 'change' }],
-    emissionType : [{ required: false, message: '请输入选择排放类型', trigger: 'change' }]
+    isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', trigger: 'change' }]
   };
   // 定义计量单位级联选择的变量
   const options: CascaderProps['options'] = [
@@ -247,6 +251,9 @@
       ],
     },
   ];
+  // const options = ref([])
+  // 排放类型的变量
+  const emissionTypeDic = ref()
   // 定义自动采集节点数的变量
   const treeData = ref<TreeSelectProps['treeData']>([
     {
@@ -289,17 +296,17 @@
   getTableList()
   // 分页器
   const onChange = (pageNumber: number,size: number) => {
-    current.value = pageNumber;
-    pageSize.value = size;
+    queryParams.value.pageNum = pageNumber;
+    queryParams.value.pageSize = size;
+    getTableList()
   };
   // 计算碳排切换
   const changeRadio = (e) => {
-    if(e.target.value==='0'){
-      rules.emissionType.required = true
+    if(e.target.value === 0){
+      isRequired.value = true
     }else{
-      rules.emissionType.required = false
+      isRequired.value = false
     }
-    console.log(rules);
   };
   // 点击确定提交
   const onSubmit = () => {
@@ -307,20 +314,105 @@
       .validate()
       .then(() => {
         console.log('values', formState, toRaw(formState));
+        if(formState.value.unit){
+          formState.value.unit = formState.value.unit.join(',')
+        }
+        if(formState.value.id){
+          fetch(energyConsumption.update , formState.value).then((res) => {
+            visible.value = false
+            message.success('操作成功！');
+            getTableList()
+          });
+        }else{
+          fetch(energyConsumption.creat , formState.value).then((res) => {
+            visible.value = false
+            message.success('操作成功！');
+            getTableList()
+          });
+        }
       })
       .catch(error => {
         console.log('error', error);
       });
   };
+  // 获取字典值
+  const getDictList = () => {
+    fetch(energyConsumption.getDicList , {grp: 'EMISSION_TYPE'}).then((res) => {
+      emissionTypeDic.value = res.data
+    });
+    // fetch(energyConsumption.getDicList , {grp: 'MEASUREMENT_UNIT'}).then((res) => {
+    //   options.value = res.data
+    // });
+  }
   // 点击新增按钮
   const addNewData = () => {
+    getDictList()
     visible.value = true
   }
+  // 点击编辑按钮
+  const editData = (record) =>{
+    getDictList()
+    visible.value = true
+    fetch(energyConsumption.findById , {id : record.id }).then((res) => {
+      if(res.data.unit){
+        res.data.unit = res.data.unit.split(',')
+      }
+      formState.value = res.data
+    });
+  };
+  // 点击删除
+  const delData = (record) => {
+    Modal.confirm({
+      title: '警告',
+      content: '确定要删除吗?',
+      okText: '确定',
+      okType: 'primary',
+      cancelText: '取消',
+      onOk() {
+        fetch(energyConsumption.del , {id : record.id }).then((res) => {
+          message.success('操作成功！');
+          getTableList()
+        });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  }
   // 关闭新增抽屉
   const onClose = () => {
     visible.value = false;
     formRef.value.resetFields();
   };
+  // 点击上传凭证按钮
+  const uploadVoucher = () => {
+    openUpload.value = true;
+  };
+  // 上传凭证弹窗点击确定
+  const handleOk = (e: MouseEvent) => {
+    console.log(e);
+    openUpload.value = false;
+  };
+  // 上传凭证相关方法及变量
+  const fileList = ref([]);
+  const handleChange = (info: UploadChangeParam) => {
+    const status = info.file.status;
+    if (status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (status === 'done') {
+      message.success(`${info.file.name} 文件上传成功`);
+    } else if (status === 'error') {
+      message.error(`${info.file.name} 文件上传失败`);
+    }
+  };
+  function handleDrop(e: DragEvent) {
+    console.log(e);
+  }
+  // 关闭上传凭证弹窗
+  const closeOpenUpload = () =>{
+    openUpload.value = false;
+  };
 </script>
 <style scoped lang="less">
   ::v-deep .ant-table-title{