dc-ui/src/views/model/heatapiconf/index.vue

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4" class="card-box">
        <div class="head-container">
          <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />
        </div>
        <div class="head-container">
          <el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false"
            :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all
            @node-click="handleNodeClick" />
        </div>
      </el-col>
      <el-col :span="20">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="90px"
          class="my-custom-form">
          <el-row>
            <!-- <el-col :span="4">
              <el-form-item label="机构编号" prop="orgCode">
                <el-tree-select v-model="queryParams.orgCode" :data="deptOptions"
                  :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择"
                  check-strictly :default-expand-all="true" @node-click="selectDept" />
              </el-form-item>
            </el-col> -->
            <el-col :span="4">
              <el-form-item label="标准值" prop="standard">
                <el-input v-model="queryParams.standard" placeholder="请输入标准值" clearable @keyup.enter="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="发送地址" prop="sendIp">
                <el-input v-model="queryParams.sendIp" placeholder="请输入发送地址" clearable @keyup.enter="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item class="childTextAlignCenter">
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button type="info" plain icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="success" icon="Plus" @click="handleAdd">新增</el-button>
          </el-col>
          <!-- <el-col :span="1.5">
        <el-button type="success" icon="Edit" @click="handleUpdate">修改</el-button>
      </el-col> -->
          <el-col :span="1.5">
            <el-button type="success" icon="Delete" @click="handleDelete">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" icon="Download" @click="handleExport">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="heatapiconfList" @selection-change="handleSelectionChange"
          :max-height="tableHeight" :border="true" :column-width-draggable="true">
          <el-table-column type="selection" width="55" align="center" fixed="left" />
          <!-- <el-table-column label="主键" align="center" prop="id" /> -->
          <el-table-column label="机构编号" align="center" prop="orgCode" />
          <el-table-column label="机构名称" align="center" prop="orgName" />
          <el-table-column label="标准值" align="center" prop="standard" />
          <el-table-column label="发送地址" align="center" prop="sendIp" />
          <el-table-column label="是否启用" align="center" prop="available">
            <template #default="scope">
              <el-switch v-model="scope.row.available" @change="changeEnabled(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="300"
            :fixed="fixedColumns ? 'right' : false">
            <template #header>
              <div class="fixed-column-header" style="text-align: center;display: block;" @dblclick="toggleFixedColumns">
                <span style="text-align: center;display: block;">操作<img style="width:10px;margin-left:5px"
                    v-show="fixedColumns" :src="lock" alt="Image" /></span>
              </div>
            </template>
            <template #default="scope">
              <el-button type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
              <el-button type="text" icon="Edit" @click="turnToParamConf(scope.row)">维护推送参数配置</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList" />

      </el-col>
    </el-row>

    <!-- 添加或修改供热办推送接口配置对话框 -->
    <el-dialog :title="title" v-model="open" width="700px" append-to-body>
      <el-form ref="heatapiconfRef" :model="form" :rules="rules" label-width="80px">

        <el-row>
          <el-col :span="14">
            <el-form-item label="机构编号" prop="orgCode">
              <el-tree-select v-model="form.orgCode" :data="deptOptions"
                :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择"
                check-strictly :default-expand-all="true" @node-click="selectDept" filterable />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="标准值" prop="standard">
              <el-input v-model="form.standard" placeholder="请输入标准值" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发送地址" prop="sendIp">
              <el-input v-model="form.sendIp" placeholder="请输入发送地址" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" > @import "@/assets/styles/self-defined.scss";
</style>
<script setup name="Heatapiconf">
import { listHeatapiconf, getHeatapiconf, delHeatapiconf, addHeatapiconf, updateHeatapiconf } from "@/api/model/heatapiconf";
import { deptTreeSelect } from "@/api/system/user";
import lock from "@/assets/icons/svg/lock.svg";
import { ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance();

const heatapiconfList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const deptOptions = ref([]);
const deptName = ref(null);
const fixedColumns = ref(false);
const tableHeight = ref("0px");
const collapseVisible = ref(false);
const router = useRouter();

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orgCode: null,
    standard: null
  },
  rules: {
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询供热办推送接口配置列表 */
function getList() {
  loading.value = true;
  listHeatapiconf(queryParams.value).then(response => {
    heatapiconfList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  form.value.standard = null;
}

// 表单重置
function reset() {
  form.value = {
    tentantId: null,
    version: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    deptId: null,
    userId: null,
    deleteBy: null,
    deleteTime: null,
    id: null,
    standard: null
  };
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value.orgCode = null;
  queryParams.value.orgName = null;
  queryParams.value.standard = null;
  queryParams.value.sendIp = null;
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  ids.names = selection.map(item => item.orgName);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  form.value.standard = null;
  form.value.available = true;
  form.value.sendIp = null;
  open.value = true;
  title.value = "添加供热办推送接口配置";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  if (_id.length === 0) {
    ElMessageBox.alert('请选择需要修改的记录', '提示', {
      confirmButtonText: '确定',
      center: true,
    })
    return;
  } else if (_id.length > 1) {
    ElMessageBox.alert('只能选择一条记录进行修改', '提示', {
      confirmButtonText: '确定',
      center: true,
    })
    return;
  }
  getHeatapiconf(_id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改供热办推送接口配置";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["heatapiconfRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateHeatapiconf(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addHeatapiconf(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  if (_ids.length == 0) {
    ElMessageBox.alert('请先选择要删除的项', '提示', {
      confirmButtonText: '确定',
      center: true,
    })
    return;
  }
  const _names = row.orgName || ids.names;
  proxy.$modal.confirm('是否确认删除供热办推送接口配置编号为"' + _names + '"的数据项？').then(function () {
    return delHeatapiconf(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}

function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
    const filteredData = getDeptTreeNew(deptOptions.value);
    deptOptions.value = filteredData;
  });
};

function selectDept(val) {
  form.value.orgCode = val.id;
  form.value.orgName = val.label;
}


/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.orgCode = data.id;
  form.value.orgCode = data.id;
  form.value.orgName = data.label;
  handleQuery();
};

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
/** 根据名称筛选部门树 */
watch(deptName, val => {
  proxy.$refs["deptTreeRef"].filter(val);
});
/**固定操作列 */
function toggleFixedColumns() {
  fixedColumns.value = !fixedColumns.value;
}

onMounted(() => {
  calculateTableHeight();
  window.addEventListener('resize', calculateTableHeight);
  window.onresize = () => {
    return (() => {
      calculateTableHeight();
    })()
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', calculateTableHeight);
});
watch(
  [collapseVisible, showSearch],
  () => {
    calculateTableHeight();
  }
);
const calculateTableHeight = () => {
  nextTick(() => {
    const heightForm = proxy.$refs.queryRef?.$el.clientHeight || 0;
    const windowHeight = window.innerHeight;
    const paginationHeight = 60;
    const tableHeaderHeight = 40;
    const tableMargin = 20;
    const remainingHeight = windowHeight - paginationHeight - tableHeaderHeight - tableMargin - heightForm - 100;
    tableHeight.value = remainingHeight + 'px';
  });
};

function getDeptTreeNew(data, level = 0) {
  const result = [];
  if (level === 0) {
    data.forEach(item => {
      if (item.children) {
        result.push(...getDeptTreeNew(item.children, level + 1));
      }
    });
  } else {
    data.forEach(item => {
      if (level < 2) {
        const newItem = { ...item };
        newItem.id = String(item.id); // 格式化id为字符串
        if (item.children) {
          newItem.children = getDeptTreeNew(item.children, level + 1);
        }
        result.push(newItem);
      }
    });
  }
  return result;
}


function changeEnabled(row){
  ElMessageBox.confirm('确定修改该启用状态吗', '提示', {
      distinguishCancelAndClose: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
  })
  .then(() => {
    console.log("确定");
    let param = {
      id:row.id,
      available:row.available
    }
    updateHeatapiconf(param);
  })
  .catch((action) => {
    console.log("取消");
    row.available = !row.available;
  })
  
}

function turnToParamConf(row){
  router.push({
    path: "heatParamModel",
    query: {
      standardConfId:row.id,
    }
  });
}

getDeptTree();
getList();
</script>