补全设备匹配功能

riku

2025-09-02 92610ba4eedbc06062240c2f2967b7e1f691797e

 src/views/fysp/config/DeviceMatch.vue

@@ -1,5 +1,5 @@
<template>
  <FYTable @search="onSearch" :pagination="true" ref="tableRef">
  <FYTable @search="onSearch" :pagination="false" ref="tableRef" size="small">
    <template #options>
      <!-- 区县 -->
      <FYOptionLocation
@@ -14,7 +14,11 @@
        :type="2"
        v-model:value="formSearch.scenetype"
      ></FYOptionScene>
      <FYOptionTime :initValue="false" type="month" v-model:value="formSearch.time"></FYOptionTime>
      <FYOptionTime
        :initValue="false"
        type="month"
        v-model:value="formSearch.time"
      ></FYOptionTime>
    </template>
    <template #buttons> </template>

@@ -24,11 +28,79 @@
      </el-form>
    </template>

    <template #table-column> 
      <el-table-column prop="sceneName" :show-overflow-tooltip="true" label="名称">
    <!-- <template #options-expand2>
      <CompDeviceMatchEdit :area="area"></CompDeviceMatchEdit>
    </template> -->

    <template #table-column>
      <el-table-column
        fixed="left"
        type="index"
        label="#"
        width="40"
        index="1"
      ></el-table-column>
      <el-table-column
        prop="deviceCode"
        :show-overflow-tooltip="true"
        label="监测设备编号"
        width="160"
      >
      </el-table-column>
      <el-table-column
        prop="deviceName"
        :show-overflow-tooltip="true"
        label="监测设备名称"
      >
      </el-table-column>
      <el-table-column
        prop="svUserName"
        :show-overflow-tooltip="true"
        label="监管用户名称"
      >
      </el-table-column>
      <el-table-column
        prop="tzUserName"
        :show-overflow-tooltip="true"
        label="守法自助用户名称"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        :show-overflow-tooltip="true"
        label="创建时间"
        :formatter="timeFormat"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="{ row }">
          <el-button
            v-show="row.deviceCode"
            type="primary"
            size="small"
            @click="itemEdit(row)"
            >编辑</el-button
          >
          <el-button type="success" size="small" @click="itemAdd(row)"
            >添加设备</el-button
          >
        </template>
      </el-table-column>
    </template>
  </FYTable>
  <el-drawer
    v-model="drawerShow"
    title="设备匹配记录编辑"
    direction="btt"
    size="80%"
    destroy-on-close
  >
    <CompDeviceMatchEdit
      :data="selectedItem"
      :area="area"
      @save="onSave"
    ></CompDeviceMatchEdit>
  </el-drawer>
</template>
<script setup>
/**
@@ -37,10 +109,13 @@
import dayjs from 'dayjs';
import { ref, reactive, computed, getCurrentInstance } from 'vue';
import userMapApi from '@/api/fysp/userMapApi';
import CompQuickSet from '@/views/fysp/evaluation/components/CompQuickSet.vue';

import CompDeviceMatchEdit from '@/views/fysp/config/device/CompDeviceMatchEdit.vue';

// fixme 2024.9.26 后续可以用vueuse中的时间格式化方法来代替
const { $fm } = getCurrentInstance().appContext.config.globalProperties;

/******** 匹配记录查询 ********/
const tableRef = ref();
const formSearch = reactive({
  locations: {},
@@ -78,4 +153,41 @@
  // formSearch.sourceType = param.sourceType;
  tableRef.value.onSearch();
}

function timeFormat(row) {
  const time = row.createTime;
  if (time) {
    return $fm.formatYMDH(time);
  } else {
    return '';
  }
}

/******** 匹配记录编辑 ********/
const drawerShow = ref(false);
const selectedItem = ref(null);
function itemEdit(row) {
  selectedItem.value = row;
  drawerShow.value = true;
}

/**
 * 向用户添加新设备
 * 不传递主键id和设备信息，以此表示需要添加新的设备
 * @param row 选中的行数据
 */
function itemAdd(row) {
  selectedItem.value = {
    svUserName: row.svUserName,
    tzUserName: row.tzUserName,
    svUserId: row.svUserId,
    tzUserId: row.tzUserId
  };
  drawerShow.value = true;
}

function onSave() {
  tableRef.value.onSearch();
  drawerShow.value = false;
}
</script>