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" 
          class="my-custom-form">
          <el-row>
            <el-col :span="8">
              <el-form-item label="排除设备" prop="excludeDevices" label-width="auto">
                <el-select v-model="queryParams.excludeDevices" placeholder="请选择排除设备" clearable multiple>
                  <el-option
                    v-for="dict in listDeviceAll"
                    :key="dict.uuid"
                    :label="dict.deviceName"
                    :value="dict.uuid"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="标准值" prop="standard" label-width="auto">
                <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" label-width="auto">
                <el-input v-model="queryParams.sendIp" placeholder="请输入发送地址" clearable @keyup.enter="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="childTextAlignLeft">
                <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" :disabled="disabled">新增</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="excludeDevices" show-overflow-tooltip="true" >
            <template #default="scope">
              {{getDevicesNames(scope.row.excludeDevices)}}
            </template>
          </el-table-column>
          <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" prop="computeSwitchTotal">
            <template #default="scope">
              <el-switch v-model="scope.row.computeSwitchTotal" @change="changeSwitch(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="12">
            <el-form-item label="所属公司" prop="orgCode">
              <el-tree-select 
                :disabled = "editable"
                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  
                style="width:100%" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标准值" prop="standard">
              <el-input v-model="form.standard" placeholder="请输入标准值" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发送地址" prop="sendIp" v-hasPermi="['model:heatapiconf:edit']">
              <el-input v-model="form.sendIp" placeholder="请输入发送地址" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排除设备" prop="excludeDevices">
              <el-select v-model="form.excludeDevices" placeholder="请选择排除设备" clearable multiple style="width:100%" >
                <el-option
                  v-for="dict in listDevices"
                  :key="dict.uuid"
                  :label="dict.deviceName"
                  :value="dict.uuid"
                />
              </el-select>
            </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 { listDeviceNoPage } from "@/api/model/device";
import { deptTreeSelect,deptTreeSelectNew } 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 listDevices = ref([]);
const orgCode = ref(null);
const listDeviceAll = ref([]);
const param = ref({});
const disabled = ref(false);
const editable = ref(false);
const treeSelected = ref(null);
const hasAvalibleDept = ref([]);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orgCode: null,
    standard: null,
    excludeDevices:[],
  },
  rules: {
  }
});

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

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

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

// 表单重置
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;
  queryParams.value.excludeDevices = [];
  treeSelected.value = 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;
  form.value.computeSwitchTotal = true;
  title.value = "添加供热办推送接口配置";
  form.value.excludeDevices = null;
  getListDevice();
  if(treeSelected.value != null && treeSelected.value != ''){
    editable.value = true;
  }else{
    editable.value = false;
  }
  
}

/** 修改按钮操作 */
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;
  }
  getListDevice(row.orgCode);
  getHeatapiconf(_id).then(response => {
    form.value = response.data;
    if(form.value.excludeDevices != null && form.value.excludeDevices?.trim() != ""){
      form.value.excludeDevices = form.value.excludeDevices.split(",");
    }else{
      form.value.excludeDevices = null;
    } // 将机构名称赋值给form对象的orgName属性
    open.value = true;
    title.value = "修改供热办推送接口配置";
  });
  editable.value = true;

}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["heatapiconfRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        form.value.excludeDevices = form.value.excludeDevices?.join(",");
        updateHeatapiconf(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        form.value.excludeDevices = form.value.excludeDevices?.join(",");
        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 getDeptTreeSelectNew() {
  deptTreeSelectNew().then(response => {
    hasAvalibleDept.value = response.data;
  });
};

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;
  getListDevice(val.id);
}

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  if (!hasAvalibleDept.value) return true; // 如果 hasAvalibleDept 为空，返回 true，表示所有节点都需要显示
  return hasAvalibleDept.value.some(dept => dept.deptId === data.id); // 使用 some 方法判断节点是否在 hasAvalibleDept 中
};

/** 判断节点是否可点击 */
const isNodeDisabled = (node) => {
  return !hasAvalibleDept.value.some(dept => dept.deptId === node.id);
};

/** 根据名称筛选部门树 */
watch(deptName, (val) => {
  proxy.$refs["deptTreeRef"].filter(val);
});

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

// /** 节点单击事件 */
// function handleNodeClick(data) {
//   queryParams.value.orgCode = data.id;
//   form.value.orgCode = data.id;
//   form.value.orgName = data.label;
//   disabled.value = data.isLeaf
//   treeSelected.value = data.id;
//   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) {
  const result = [];
  data.forEach(item => {
    if (item.orgType === '1003') {
      const newItem = { ...item }; // 使用深拷贝创建新的部门对象
      newItem.children = []; // 将叶节点的 children 属性设置为空数组，不包含子节点
      newItem.isLeaf = false;
      newItem.id = String(item.id);
      result.push(newItem);
    } else if (item.children) {
      const children = getDeptTreeNew(item.children); // 递归调用处理子节点
      if (children.length > 0) {
        const newItem = { ...item }; // 使用深拷贝创建新的部门对象
        newItem.children = children;
        newItem.isLeaf = true;
        newItem.id = String(item.id);
        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,
    }
  });
}

function getListDevice(orgCode) {
  let param = {};
  if(orgCode != null && typeof orgCode === 'string'){
    param.orgCode = orgCode;
  }else{
    param.orgCode = form.value.orgCode;
  }
  listDeviceNoPage(param).then(response => {
    listDevices.value = response.data;
  });
}

function getDevicesNames(deviceIds){

if(!deviceIds) return '';
let deviceIdSet = new Set(deviceIds.split(','));
let deviceMap = new Map();
listDeviceAll.value.forEach(device => {
  deviceMap.set(device.uuid, device.deviceName);
});
let deviceNames = [];
for (let deviceId of deviceIdSet) {
  let name = deviceMap.get(deviceId);
  if (name) {
    deviceNames.push(name);
  } else {
    console.log("该设备没能匹配到对应设备名称："+deviceId)
  }
}
return deviceNames.join(',');
}

function getDevicesAll(){
  listDeviceNoPage().then(response => {
    listDeviceAll.value = response.data;
  });
}

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

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