联调 干扰源用户 谐波普测页面

src/views/pqs/supervise/harmonicSurvey/components/occupancy.vue

@@ -1,11 +1,139 @@
 <template>
+    <div>
+        <el-button icon="el-icon-Check" type="primary" @click="preserve">保存</el-button>
+        <el-button icon="el-icon-Grid" type="primary" @click="dialogVisible = true">配置保存年限</el-button>
+        <div class="mt10" :style="`height: calc(${height} - 43px)`">
+            <vxe-table
+                v-bind="defaultAttribute"
+                height="auto"
+                ref="tableRef"
+                :data="tableData"
+                :tree-config="{ children: 'children' }"
+                :edit-config="{ trigger: 'click', mode: 'cell' }"
+            >
+                <vxe-table-column field="name" align="left" title="部门" tree-node></vxe-table-column>
 
-    <div>占比 </div>
-
+                <vxe-table-column
+                    field="proportion"
+                    title="占比(%)"
+                    :edit-render="{
+                        name: '$input',
+                        props: { type: 'float', digits: 2, max: 100, min: 0 }
+                    }"
+                ></vxe-table-column>
+            </vxe-table>
+        </div>
+        <el-dialog v-model="dialogVisible" title="年限设置" width="500" :before-close="handleClose">
+            <el-input-number v-model="num" :min="0" :max="1000" />
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button type="primary" @click="define">保存</el-button>
+                    <el-button @click="handleClose">取消</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
 </template>
-<script setup lang='ts'>
-import { ref, reactive } from 'vue'
-</script>
-<style lang="scss" scoped>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { mainHeight } from '@/utils/layout'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getAreaList } from '@/api/common'
+import { addPlanConfig, addPlanCycle, queryPlanConfig } from '@/api/process-boot/generalTest'
+const dialogVisible = ref(false)
+const num = ref(0)
+const tableRef = ref()
+const height = mainHeight(80).height
+const tableData: any = ref([])
+const treeData = ref([])
+const treeList: any = ref([])
+const info = async () => {
+    await queryPlanConfig().then(res => {
+        treeData.value = res.data
+    })
+    await getAreaList().then((res: any) => {
+        tableData.value = circulationTreeData(res.data)
+        setTimeout(() => {
+            tableRef.value.setAllTreeExpand(true)
+        }, 0)
+    })
+}
+const circulationTreeData = (rows: any) => {
+    let children: any = []
 
-</style>
+    rows.forEach((item: any) => {
+        let proportion = 0
+        treeData.value.forEach((val: any) => {
+            if (val.orgId == item.id) {
+                proportion = val.proportion
+                return
+            }
+        })
+
+        if (item.children && item.children.length > 0) {
+            children.push({
+                name: item.name,
+                id: item.id,
+                proportion: proportion,
+                children: circulationTreeData(item.children)
+            })
+        } else {
+            children.push({
+                name: item.name,
+                id: item.id,
+                proportion: proportion
+            })
+        }
+    })
+
+    return children
+}
+const preserve = () => {
+    treeList.value = []
+    circulation(tableData.value)
+    setTimeout(() => {
+        addPlanConfig(treeList.value).then(res => {
+            ElMessage.success('保存成功!')
+            info()
+        })
+    }, 0)
+}
+// 保存配置
+const define = () => {
+    addPlanCycle({
+        cycleNum: num.value
+    }).then(res => {
+        if (res.data.flag == true) {
+            ElMessage.success('年限设置成功!')
+            handleClose()
+        } else {
+            ElMessage.warning(`本次普测计划周期还未结束,请在 ${res.data.endYear} 后设置!`)
+        }
+    })
+}
+const circulation = (rows: any) => {
+    let children: any = []
+
+    rows.forEach((item: any) => {
+        treeList.value.push({
+            orgName: item.name,
+            orgId: item.id,
+            proportion: item.proportion
+        })
+        if (item.children && item.children.length > 0) {
+            circulation(item.children)
+        }
+    })
+
+    return children
+}
+const handleClose = () => {
+    dialogVisible.value = false
+    num.value = 0
+}
+
+onMounted(() => {
+    info()
+})
+</script>