- <template>
- <div class="threeLevel">
- <div class="top">
- <el-form ref="ruleForm" :model="form">
- <el-row :gutter="20">
- <el-col :span="6">
- <el-form-item label="分区名称:" prop="partitionName">
- <el-input v-model="form.partitionName" placeholder="请输入二级分区名称" style="width: 100%"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="6">
- <el-form-item>
- <el-button type="primary" icon="Search" @click="search"> 查询</el-button>
- <el-button icon="Refresh" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- </div>
- <el-table :data="tableData" v-loading="loading" stripe max-height="650" :span-method="objectSpanMethod">
- <el-table-column type="index" label="序号" width="60" />
- <el-table-column label="二级分区名称" prop="parentName" show-overflow-tooltip />
- <el-table-column label="三级分区编号" prop="partitionNum" show-overflow-tooltip />
- <el-table-column label="分区面积(k㎡)" prop="partitionArea" show-overflow-tooltip />
- <el-table-column label="年径流总量控制率指标%" prop="annualRunoffTarget" show-overflow-tooltip />
- <el-table-column label="设计降雨量mm" prop="designRainfall" show-overflow-tooltip />
- <template v-if="disabled">
- <el-table-column label="年径流总量控制率实际值%" prop="annualRunoffReality" show-overflow-tooltip />
- <el-table-column label="超目标%" prop="superTarget" show-overflow-tooltip>
- <template #default="{ row }">
- <span :class="row.superTarget ? (row.superTarget >= 0 ? 'green' : 'red') : ''">{{ row.superTarget }}</span>
- </template>
- </el-table-column>
- </template>
- <template v-else>
- <el-table-column label="修改时间" prop="updateTime" show-overflow-tooltip />
- <el-table-column label="操作" show-overflow-tooltip width="170">
- <template #default="{ row }">
- <el-button type="primary" link @click="openDialog(row, 'view')">查看</el-button>
- <el-button type="primary" link @click="openDialog(row, 'edit')">编辑</el-button>
- </template>
- </el-table-column>
- </template>
- </el-table>
- <el-dialog v-model="visible" :title="opts.text" :close-on-click-modal="false" width="50%" :before-close="close" class="dialog">
- <el-form ref="dialogFormRef" label-width="166px" :model="dialogForm" v-if="visible" :disabled="opts.type === 'view'">
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="三级分区编号:" prop="partitionNum" label-width="112px">
- <el-input v-model="dialogForm.partitionNum" disabled />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="所属二级分区:" prop="parentId">
- <el-select v-model="dialogForm.parentId" placeholder="请选择二级分区" style="width: 100%">
- <el-option v-for="item in parentList" :key="item.id" :label="item.partitionName" :value="item.id" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="分区面积:" prop="partitionArea" label-width="112px">
- <el-input v-model="dialogForm.partitionArea" placeholder="请输入分区面积">
- <template #append>k㎡</template>
- </el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="年径流总量控制率指标:" prop="annualRunoffTarget">
- <el-input v-model="dialogForm.annualRunoffTarget" placeholder="请输入年径流总量控制率指标">
- <template #append>%</template>
- </el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="设计降雨:" prop="designRainfall" label-width="112px">
- <el-input v-model="dialogForm.designRainfall" disabled>
- <template #append>mm</template>
- </el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer v-if="opts.type !== 'view'">
- <div class="dialog-footer">
- <el-button type="primary" @click="submit">确 定</el-button>
- <el-button @click="close">取 消</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
-
- <script setup>
- import { getControlPartitionList, controlPartitionEdit, getControlPartitionTargetList } from '@/api/project/partition';
- import { optTextMap } from '@/utils/map';
- import { inheritAttr } from '@/utils/v3';
- const { proxy } = getCurrentInstance();
- const props = defineProps({
- disabled: {
- type: Boolean,
- default: false,
- },
- });
- const form = reactive({
- type: 3,
- partitionName: '',
- });
- const tableData = ref([]);
- const loading = ref(false);
- const visible = ref(false);
- const opts = reactive({
- text: '',
- type: '',
- });
-
- const dialogForm = reactive({
- id: '',
- parentId: '',
- partitionNum: '',
- partitionArea: '',
- annualRunoffTarget: '',
- designRainfall: '',
- });
-
- const parentList = ref([]);
- let spanArr = [];
-
- const getParentList = async () => {
- const res = await getControlPartitionList({ type: 2 });
- if (res?.code !== 200) return;
- parentList.value = res?.data || [];
- };
- getParentList();
-
- const openDialog = (data, type) => {
- visible.value = true;
- opts.type = type;
- opts.text = optTextMap.get(type);
- inheritAttr(data, dialogForm);
- };
-
- const close = () => {
- visible.value = false;
- opts.type = '';
- opts.text = '';
- search();
- };
-
- const submit = () => {
- proxy.$refs.dialogFormRef.validate(async (valid, fields) => {
- if (valid) {
- const { id, parentId, partitionArea, annualRunoffTarget } = dialogForm;
- const res = await controlPartitionEdit({ id, parentId, partitionArea, annualRunoffTarget });
- if (res?.code !== 200) return;
- close();
- proxy.$modal.msgSuccess('操作成功');
- } else {
- console.log(fields);
- }
- });
- };
-
- const search = () => {
- getTableList();
- };
-
- const resetQuery = () => {
- proxy.$refs.ruleForm.resetFields();
- search();
- };
-
- const getTableList = async () => {
- loading.value = true;
- try {
- let methed = getControlPartitionList;
- if (props.disabled) methed = getControlPartitionTargetList;
- const res = await methed(form);
- loading.value = false;
- if (res?.code !== 200) return;
- tableData.value = res?.data || [];
- tableData.value.forEach(item => {
- item.parentId = item.parentId + '';
- });
- spanArr = [];
- getSpanArr(tableData.value);
- } catch (error) {
- loading.value = false;
- }
- };
-
- const getSpanArr = data => {
- let pos = 0;
- // data就是我们从后台拿到的数据
- for (let i = 0; i < data.length; i++) {
- if (i === 0) {
- spanArr.push(1);
- pos = 0;
- } else {
- // 判断当前元素与上一个元素是否相同
- if (data[i].parentName === data[i - 1].parentName) {
- spanArr[pos] += 1;
- spanArr.push(0);
- } else {
- spanArr.push(1);
- pos = i;
- }
- }
- }
- };
-
- const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
- if (columnIndex === 1) {
- const _row = spanArr[rowIndex];
- const _col = _row > 0 ? 1 : 0;
- // console.log(`rowspan:${_row} colspan:${_col}`);
- return {
- // [0,0] 表示这一行不显示, [2,1]表示行的合并数
- rowspan: _row,
- colspan: _col,
- };
- }
- };
-
- onMounted(() => {
- getTableList();
- });
- </script>
-
- <style lang="scss" scoped>
- @import '@/assets/styles/variables.module.scss';
- .green {
- color: $green;
- }
- .red {
- color: $red;
- }
- </style>