feat: 资源管理页面

src/views/energyStorage/manage/resourceManage/index.scss

@@ -0,0 +1,8 @@
+.demo-tabs {
+  height: calc(100vh - 200px);
+  margin: 0 20px;
+}
+:deep(.demo-tabs > .el-tabs__content) {
+  padding: 32px;
+  color: #6b778c;
+}

src/views/energyStorage/manage/resourceManage/index.vue

@@ -1,129 +1,99 @@
 <template>
   <div class="table-box">
-    <ProTable ref="proTable" :columns="columns" row-key="id" :pagination="true" :request-api="resourceListApi">
-      <!-- 表格 header 按钮 -->
-      <template #tableHeader>
-        <el-button type="primary" v-auth="['system:dept:add']" icon="CirclePlus" @click="openDialog(1, '新增')"> 新增 </el-button>
-      </template>
-      <template #file="scope">
-        <el-button type="success" link icon="view" v-auth="['system:dept:edit']" @click="openParameterDialog(scope.row.file)">
-          {{ scope.row.file }}
-        </el-button>
-      </template>
-      <!-- 表格操作 -->
-      <template #operation="scope">
-        <el-button type="primary" link icon="EditPen" v-auth="['system:dept:edit']" @click="openDialog(2, '编辑', scope.row)"> 编辑 </el-button>
-        <el-button
-          v-if="scope.row.parentId != 0"
-          type="primary"
-          link
-          icon="Delete"
-          v-auth="['system:dept:remove']"
-          @click="deleteEquipment(scope.row)"
-        >
-          删除
-        </el-button>
-      </template>
-    </ProTable>
-    <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model"> </FormDialog>
-    <ImportExcel ref="dialogRef" />
-    <el-dialog v-model="parameterVisible" title="负荷信息" width="50%">
-      <!-- <span>该区域显示负荷曲线</span> -->
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="parameterVisible = false">Cancel</el-button>
-          <el-button type="primary" @click="parameterVisible = false"> Confirm </el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <div style="margin: 15px">
+      <el-button type="primary" icon="CirclePlus" @click="addTab(editableTabsValue)"> 新增资源 </el-button>
+    </div>
+    <el-tabs v-model="editableTabsValue" type="border-card" class="demo-tabs" closable @tab-remove="removeTab">
+      <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
+        <el-form :model="form" label-width="auto" :inline="true">
+          <el-form-item label="系统所在地经度">
+            <el-input v-model="form.longitude" />
+          </el-form-item>
+          <el-form-item label="系统所在地所在纬度">
+            <el-input v-model="form.latitude" />
+          </el-form-item>
+          <el-form-item label="标准时间子午线">
+            <el-input v-model="form.latitude" />
+          </el-form-item>
+          <el-form-item label="地面反射系数">
+            <el-input v-model="form.latitude" />
+          </el-form-item>
+          <el-form-item label="当前时间">
+            <el-input v-model="form.latitude" />
+          </el-form-item>
+          <el-form-item label="每月天数">
+            <el-input v-model="form.intensity" />
+          </el-form-item>
+          <el-form-item label="雨天天数">
+            <el-input v-model="form.intensity" />
+          </el-form-item>
+          <el-form-item label="晴天天数">
+            <el-input v-model="form.intensity" />
+          </el-form-item>
+          <el-form-item label="文件导入">
+            <FileS3 />
+            <!-- <el-input v-model="form.file" /> -->
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script setup lang="tsx" name="resourceManage">
-import { useHandleData } from '@/hooks/useHandleData'
-import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/FormDialog/index.vue'
-import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-import { delDeptApi, addDeptApi, updateDeptApi } from '@/api/modules/system/dept'
-import { resourceListApi } from '@/api/modules/energyStorage/resourceManage'
+// import { resourceListApi } from '@/api/modules/energyStorage/resourceManage'
 
-const proTable = ref<ProTableInstance>()
-const model = ref({})
-const parameterVisible = ref(false)
-// 删除设备信息
-const deleteEquipment = async (params: any) => {
-  await useHandleData(delDeptApi, params.id, `删除【${params.name}】`)
-  proTable.value?.getTableList()
-}
-
-const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
-// 打开弹框的功能
-const openDialog = async (type: number, title: string, row?: any) => {
-  model.value = {}
-  // 重置表单项
-  setItemsOptions()
-  if (row?.parentId == 0 && type == 2) {
-    itemsOptions.splice(0, 1)
-  }
-  // 增加子节点
-  if (type == 4) {
-    row = { parentId: row?.deptId }
-  }
-  if (type !== 1) {
-    model.value = row
-  }
-  const params = {
-    title,
-    width: 700,
-    isEdit: type !== 3,
-    api: type == 1 || type == 4 ? addDeptApi : updateDeptApi,
-    getTableList: proTable.value?.getTableList
-  }
-  formDialogRef.value?.openDialog(params)
-}
-const openParameterDialog = parameter => {
-  parameterVisible.value = true
-  console.log('parameter', parameter)
-}
-
-// 表格配置项
-const columns = reactive<ColumnProps<any>[]>([
+import { ref } from 'vue'
+const form = reactive({
+  longitude: '',
+  latitude: '',
+  intensity: '',
+  file: ''
+})
+let tabIndex = 1
+const editableTabsValue = ref('1')
+const editableTabs = ref([
   {
-    prop: 'name',
-    label: '负荷名称',
-    search: {
-      el: 'input'
-    }
+    title: '光照数据',
+    name: '1',
+    content: 'Tab 1 content'
   },
   {
-    prop: 'file',
-    label: '文件'
-  },
-  { prop: 'operation', label: '操作' }
+    title: '风力数据',
+    name: '2',
+    content: 'Tab 2 content'
+  }
 ])
 
-// 表单配置项
-let itemsOptions = reactive<ProForm.ItemsOptions[]>([])
-const setItemsOptions = () => {
-  itemsOptions = [
-    {
-      label: '负荷名称',
-      prop: 'name',
-      rules: [{ required: true, message: '负荷名称不能为空', trigger: 'blur' }],
-      span: 14,
-      compOptions: {
-        placeholder: '请输入负荷名称'
-      }
-    },
-    {
-      label: '文件',
-      prop: 'file',
-      span: 14,
-      compOptions: {
-        elTagName: 'file-upload-s3'
-        // elTagName: 'slot'
+const addTab = (targetName: string) => {
+  console.log('targetName', targetName)
+
+  const newTabName = `${++tabIndex}`
+  editableTabs.value.push({
+    title: 'New Tab',
+    name: newTabName,
+    content: 'New Tab content'
+  })
+  editableTabsValue.value = newTabName
+}
+const removeTab = (targetName: string) => {
+  const tabs = editableTabs.value
+  let activeName = editableTabsValue.value
+  if (activeName === targetName) {
+    tabs.forEach((tab, index) => {
+      if (tab.name === targetName) {
+        const nextTab = tabs[index + 1] || tabs[index - 1]
+        if (nextTab) {
+          activeName = nextTab.name
+        }
       }
-    }
-  ]
+    })
+  }
+
+  editableTabsValue.value = activeName
+  editableTabs.value = tabs.filter(tab => tab.name !== targetName)
 }
 </script>
+<style scoped lang="scss">
+@import './index';
+</style>