hldy_yunwei_vue/src/views/iot/baseIot/compoents/SbForm.vue

<template>
  <div class="p-2">
    <div style="margin-bottom: 30px;">
      <SectionDivider :title="'基础信息'" />
      <span class="jcxxClass">NUID：{{baseIotInfo.nuId}}</span>
      <span class="jcxxClass">单元名称：{{baseIotInfo.nuName}}</span>
      <span class="jcxxClass">单元类型：{{baseIotInfo.areaFlagText}}</span>
    </div>
    <SectionDivider :title="'水表列表'" />
    <div style="padding-left: 40px;margin-bottom: 10px;">
      <span style="font-size:16px;">是否分配：</span>
      <a-radio-group v-model:value="queryParam.checkType" @change="handleTableChange({current:1})">
        <a-radio-button value="">全部</a-radio-button>
        <a-radio-button value="1">已分配</a-radio-button>
        <a-radio-button value="0">未分配</a-radio-button>
      </a-radio-group>
    </div>
    <a-table :columns="baseSbColumns" :data-source="dataList.records" :pagination="pageParams" @change="handleTableChange" >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <span>
            <a @click="handleSelect(record)">选择</a>
          </span>
        </template>
      </template>
    </a-table>
    <SectionDivider :title="'已选择列表'" />
    <a-table :columns="checkSbColumns" :data-source="checkDataList.records" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <span>
            <a @click="handleUnSelect(record)">移除</a>
          </span>
        </template>
      </template>
    </a-table>

  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { baseSbColumns,checkSbColumns } from '../BaseIot.data';
  import { Pagination } from 'ant-design-vue';

  const formRef = ref();
  const queryParam = reactive<any>({checkType:''});
  const emit = defineEmits(['register', 'ok']);
  const { createMessage } = useMessage();
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
  const confirmLoading = ref<boolean>(false);
  const dataList= ref<any>([]);
  const checkDataList= ref<any>([]);
  const baseIotInfo= ref<any>({});
  const pageParams = ref({ pageNo: 1, pageSize: 10, total: 0, showTotal: (total) => `共 ${total} 条数据` })
  

  /**
   * 初始化
   */
  function init(record) {
    console.log("🚀 ~ init ~ record:", record)
    baseIotInfo.value = record;
    queryParam.pageNo = 1;
    queryParam.checkType = '0';
    getDataList();
    getCheckDataList();
  }
  /**
   * 分页触发方法
   */
  function handleTableChange(record){
    queryParam.pageNo = record.current;
    getDataList();
  }
  /**
   * 获取数据列表
   */
  function getDataList() { 
    queryParam.pageSize = pageParams.value.pageSize;
    defHttp.get({ url: '/iot/tq/waterMeter/list',params:queryParam }).then((res) => { 
      dataList.value = res;
      pageParams.value.total = res.total;
    });
  }
  /**
   * 获取已选的数据列表
   */
  function getCheckDataList(){
    const params = {nuId:baseIotInfo.value.nuId}
    defHttp.get({ url: '/iot/tq/waterMeter/list',params }).then((res) => { 
      checkDataList.value = res;
    });
  }

  function handleSelect(record){
    if(checkDataList.value.records.some(item => item.id === record.id)){
      createMessage.error('已选择该设备')
    }else{
      checkDataList.value.records.push(record)
    }
  }
  function handleUnSelect(record){ 
    checkDataList.value.records = checkDataList.value.records.filter(item => item.id !== record.id)
  }
  /**
   * 提交数据
   */
  function submitForm() { 
    const list = checkDataList.value.records;
    const orgInfo = baseIotInfo.value.orgInfo;
    const params = {nuId:baseIotInfo.value.nuId,
    nuName:baseIotInfo.value.nuName,
    dataSourceCode:baseIotInfo.value.sysOrgCode,
    departId: orgInfo.id,
    departName: orgInfo.departName,
    list}
    defHttp.post({url:"/iot/tq/waterMeter/syncWaterList",params}).then((res)=>{ 
      console.log("🚀 ~ submitForm ~ res:", res)
      emit("ok")
    })

  }


  defineExpose({
    init,
    submitForm,
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    padding: 14px;
  }
  .jcxxClass{
    margin-left: 35px;
  }
</style>