完成承载能力评估联调

src/views/pqs/bearingCapacity/userManagement/equipment.vue

@@ -0,0 +1,150 @@
+<template>
+    
+        <el-dialog class="cn-operate-dialog" v-model="dialogVisible" title="设备">
+            <el-button icon="el-icon-Plus" type="primary" @click="add" class="mb10">新增</el-button>
+            <vxe-table v-bind="defaultAttribute" v-loading="loading" height="auto" ref="xTable" :data="userData">
+                <vxe-column field="devName" title="设备名称"></vxe-column>
+                <vxe-column field="devScale" title="电压等级" :formatter="formatter"></vxe-column>
+                <vxe-column field="protocolCapacity" title="设备容量(MVA)"></vxe-column>
+                <vxe-column title="操作" width="120px">
+                    <template #default="{ row }">
+                        <el-button type="primary" size="small" link @click="revise(row)">修改</el-button>
+
+                        <el-popconfirm @confirm="deleteD(row)" title="确认删除设备?">
+                            <template #reference>
+                                <el-button type="danger" size="small" link>删除</el-button>
+                            </template>
+                        </el-popconfirm>
+                    </template>
+                </vxe-column>
+            </vxe-table>
+        </el-dialog>
+        <el-dialog v-model="addShow" width="400px" :title="title" :before-close="handleClose">
+            <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
+                <el-form-item label="设备名称" prop="devName">
+                    <el-input v-model="form.devName" placeholder="请输入设备名称" />
+                </el-form-item>
+                <el-form-item label="电压等级" prop="devScale">
+                    <el-select v-model="form.devScale" clearable placeholder="请选择电压等级">
+                        <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="设备容量" prop="protocolCapacity">
+                    <el-input-number
+                        v-model="form.protocolCapacity"
+                        style="width: 100%"
+                        :min="0"
+                        placeholder="请选择设备容量"
+                    />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="handleClose">取消</el-button>
+                    <el-button type="primary" @click="submitForm">确定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { queyDeviceList, addDev, updateDev, removeDev } from '@/api/advance-boot/bearingCapacity'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { useDictData } from '@/stores/dictData'
+import { ElMessage } from 'element-plus'
+const dictData = useDictData()
+const levelList = dictData.getBasicData('Dev_Voltage_Stand')
+const dialogVisible = ref(false)
+const addShow = ref(false)
+const loading = ref(false)
+const userData = ref([])
+const rowList = ref([])
+const title = ref('')
+const formRef = ref()
+
+const form: any = ref({
+    devName: '',
+    devScale: '',
+    protocolCapacity: 0,
+    userId: ''
+})
+const rules = {
+    devName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
+    devScale: [{ required: true, message: '请输入设备名称', trigger: 'change' }],
+    protocolCapacity: [{ required: true, message: '请输入设备名称', trigger: 'blur' }]
+}
+const open = (row: any) => {
+    dialogVisible.value = true
+    loading.value = true
+    rowList.value = row
+    queyDeviceList({
+        userId: row.userId
+    }).then(res => {
+        loading.value = false
+        userData.value = res.data
+    })
+}
+// 新增
+const add = () => {
+    addShow.value = true
+    title.value = '新增设备'
+}
+
+// 过滤数据
+const formatter = (row: any) => {
+    if (row.column.field == 'devScale') {
+        return levelList.filter(item => item.id == row.cellValue)[0].name
+    } else {
+        return row.cellValue
+    }
+}
+// 修改
+const revise = (row: any) => {
+    form.value = JSON.parse(JSON.stringify(row))
+    title.value = '修改设备'
+    addShow.value = true
+}
+// 关闭弹框
+const handleClose = () => {
+    addShow.value = false
+    form.value = {
+        devName: '',
+        devScale: '',
+        protocolCapacity: 0,
+        userId: ''
+    }
+    formRef.value.resetFields()
+}
+// 新增设备
+const submitForm = async () => {
+    await formRef.value.validate(valid => {
+        if (valid) {
+            if (title.value == '新增设备') {
+                form.value.userId = rowList.value.userId
+                addDev(form.value).then(res => {
+                    ElMessage.success('新增成功!')
+                    open(rowList.value)
+                    handleClose()
+                })
+            } else {
+                updateDev(form.value).then(res => {
+                    ElMessage.success('修改成功!')
+                    open(rowList.value)
+                    handleClose()
+                })
+            }
+        }
+    })
+}
+// 删除设备
+const deleteD = row => {
+    removeDev({ devIds: row.devId }).then(res => {
+        ElMessage.success('删除设备成功!')
+        open(rowList.value)
+    })
+}
+
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped></style>

src/views/pqs/bearingCapacity/userManagement/index.vue

@@ -4,11 +4,7 @@
             <TableHeader datePicker ref="TableHeaderRef">
                 <template #select>
                     <el-form-item label="用户类型">
-                        <el-select
-                            v-model="tableStore.table.params.userType"
-                            clearable
-                           placeholder="请选择用户类型"
-                        >
+                        <el-select v-model="tableStore.table.params.userType" clearable placeholder="请选择用户类型">
                             <el-option v-for="item in uesrList" :key="item.id" :label="item.name" :value="item.id" />
                         </el-select>
                     </el-form-item>
@@ -24,12 +20,7 @@
                         <el-input v-model="form.userName" clearable placeholder="请输入用户名称" />
                     </el-form-item>
                     <el-form-item label="用户类型：" prop="userType">
-                        <el-select
-                            v-model="form.userType"
-                            clearable
-                           placeholder="请选择用户类型"
-                            @change="useChange"
-                        >
+                        <el-select v-model="form.userType" clearable placeholder="请选择用户类型" @change="useChange">
                             <el-option v-for="item in uesrList" :key="item.id" :label="item.name" :value="item.id" />
                         </el-select>
                     </el-form-item>
@@ -73,6 +64,8 @@
                 </template>
             </el-dialog>
         </div>
+        <!-- 设备 -->
+        <equipment ref="equipmentRef" />
     </div>
 </template>
 <script setup lang="ts">
@@ -83,6 +76,7 @@ import TableHeader from '@/components/table/header/index.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { mainHeight } from '@/utils/layout'
 import { useDictData } from '@/stores/dictData'
+import equipment from './equipment.vue'
 import { addUse, updateUse, removeUse } from '@/api/advance-boot/bearingCapacity'
 defineOptions({
     name: 'estimate/photovoltaic'
@@ -93,6 +87,7 @@ const uesrList = dictData.getBasicData('CARRY_CAPCITY_USER_TYPE')
 const dialogVisible = ref(false)
 const disabled = ref(false)
 const TableHeaderRef = ref()
+const equipmentRef = ref()
 const title = ref('')
 const areaList: any = dictData.areaSelect()
 const userShow: any = ref('Power_Station_Users')
@@ -129,7 +124,7 @@ const rules = {
 }
 const props = { label: 'name', value: 'id' }
 const ruleFormRef = ref()
-const tableStore = new TableStore({
+const tableStore: any = new TableStore({
     url: '/advance-boot/carrycapacityuser/queyDetailUser',
     // url: '/hzj/carrycapacityuser/queyDetailUser',
     method: 'POST',
@@ -187,6 +182,16 @@ const tableStore = new TableStore({
             width: '180',
             render: 'buttons',
             buttons: [
+                {
+                    name: 'edit',
+                    title: '设备 ',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {
+                        equipmentRef.value.open(row)
+                    }
+                },
                 {
                     name: 'edit',
                     title: '查看',
@@ -206,7 +211,7 @@ const tableStore = new TableStore({
                 {
                     name: 'edit',
                     title: '编辑',
-                    type: '',
+                    type: 'primary',
                     icon: 'el-icon-Plus',
                     render: 'basicButton',
                     click: async row => {
@@ -242,8 +247,7 @@ const tableStore = new TableStore({
     ],
 
     loadCallback: () => {
-        console.log(tableStore.table.data);
-        
+        console.log(tableStore.table.data)
     }
 })
 
@@ -251,14 +255,7 @@ tableStore.table.params.userType = ''
 
 provide('tableStore', tableStore)
 onMounted(() => {
-    TableHeaderRef.value.setDatePicker([{ label: '周', value: 4 }])
-    TableHeaderRef.value.setInterval(4)
-
-    setTimeout(() => {
-        tableStore.table.params.startTime = TableHeaderRef.value.datePickerRef.timeValue[0]
-        tableStore.table.params.endTime = TableHeaderRef.value.datePickerRef.timeValue[1]
-        tableStore.index()
-    }, 100)
+    tableStore.index()
 })
 const useChange = (e: string) => {
     userShow.value = uesrList.filter(item => item.id == e)[0].code