hldy_yunwei_vue/src/views/iotManager/components/PreviewList.vue

<template>
  <a-spin :spinning="confirmLoading">
    <div class="p-2">
      <!--查询区域-->
      <div class="jeecg-basic-table-form-container">
        <a-form ref="formRef" :model="queryParam" :label-col="labelCol"
                :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :lg="6">
<!--              <a-form-item name="nuId">-->
<!--                <a-select ref="select"-->
<!--                          placeholder="请选择区域"-->
<!--                          v-model:value="queryParam.nuId">-->
<!--                  <a-select-option :value="item.nuId" v-for="item in nuInfos" :key="item.nuId">{{item.nuId}}</a-select-option>-->
<!--                </a-select>-->
<!--                <j-dict-select-tag type='list' v-model:value="queryParam.nuId" :dictCode="getNuList()"-->
<!--                                   placeholder="请选择区域" allow-clear />-->
<!--              </a-form-item>-->
              <a-form-item name="nuName">
                <template #label><span title="区域名称">区域名称</span></template>
                <a-input placeholder="请输入区域名称" v-model:value="queryParam.nuName" allow-clear ></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="dimension">
                <template #label><span title="设备维度">设备维度</span></template>
                <a-select v-model:value="queryParam.dimension" placeholder="请选择设备维度" allow-clear>
                  <a-select-option value="机构维度">机构维度</a-select-option>
                  <a-select-option value="区域维度">区域维度</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="deviceType">
                <template #label><span title="设备类型">设备类型</span></template>
                <j-dict-select-tag v-model:value="queryParam.deviceType" :showLabel="false" dictCode="tplink_device_type" placeholder="请选择设备类型"  allow-clear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="deviceStatus">
                <template #label><span title="在线状态">在线状态</span></template>
                <a-select v-model:value="queryParam.deviceStatus" placeholder="请选择在线状态" allow-clear>
                  <a-select-option value="在线">在线</a-select-option>
                  <a-select-option value="离线">离线</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-col :lg="6">
                  <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
                  <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
                            style="margin-left: 8px">重置</a-button>
                </a-col>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!--引用表格-->
      <BasicTable @register="registerTable">
        <!--插槽:table标题-->
        <template #tableTitle>
        </template>
        <!--操作栏-->
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)"/>
        </template>
        <template v-slot:bodyCell="{ column, record, index, text }">
        </template>
      </BasicTable>
    </div>
  </a-spin>
</template>

<script lang="ts" name="iotManager-previewList" setup>
import {ref, reactive, defineExpose, nextTick, createVNode} from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { orgDeviceColumns } from '../manager.data';
import {previewList, releaseDevice, unbindDevice} from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import {Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";

const formRef = ref();
const confirmLoading = ref<boolean>(false);
const queryParam = reactive<any>({});
const departId = ref<any>('');
const nuId = ref<any>('');
const orgCode = ref<any>('');
const remarks = ref<any>('');
const visible = ref<any>();
const userStore = useUserStore();
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  tableProps: {
    title: '设备预览',
    api: previewList,
    columns: orgDeviceColumns,
    canResize: false,
    useSearchForm: false,
    showIndexColumn: true,
    actionColumn: {
      width: 100,
      fixed: 'right',
    },
    beforeFetch: async (params) => {
      queryParam.departId = departId.value;
      return Object.assign(params, queryParam);
    },
  },
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
const labelCol = reactive({
  xs:24,
  sm:8,
  xl:8,
  xxl:8
});
const wrapperCol = reactive({
  xs: 24,
  sm: 16,
});

/**
 * 成功回调
 */
function handleSuccess() {
  reload();
}

/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '换绑',
      onClick: deviceUpBindManager.bind(null, record),
    },
    {
      label: '释放',
      onClick: deviceReleaseManager.bind(null, record),
      ifShow: () => {
        return record.izAllocate == '已分配';
      },
    },
    {
      label: '解绑',
      onClick: deviceUnBindManager.bind(null, record),
      ifShow: () => {
        return record.izAllocate == '释放';
      },
    },
  ];
}

//换绑
function deviceUpBindManager(record: Recordable){

}

//释放
function deviceReleaseManager(record: Recordable){
  Modal.confirm({
    title: '设备释放',
    width: '500px',
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode('div', { style: 'color:red;' }, '确定要释放该设备吗？'),
    okText: '确定',
    onOk() {
      releaseDevice(record).then((res) => {}).catch(() =>{}).finally(() => {reload();});
    },
    onCancel() {
    },
    class: 'test',
  });
}

function deviceUnBindManager(record: Recordable){
  Modal.confirm({
    title: '设备解绑',
    width: '500px',
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode('div', { style: 'color:red;' }, '确定要解绑该设备吗？'),
    okText: '确定',
    onOk() {
      unbindDevice(record).then((res) => {}).catch(() =>{}).finally(() => {reload();});
    },
    onCancel() {
    },
    class: 'test',
  });
}

/**
 * 查询
 */
function searchQuery() {
  reload();
}

/**
 * 重置
 */
function searchReset() {
  formRef.value.resetFields();
  selectedRowKeys.value = [];
  //刷新数据
  searchQuery();
}

function handleCreate(){
  visible.value = true;
}

// function getNuList(){
//   return 'nu_base_info,nu_name,nu_id,sys_org_code = \'' + orgCode.value + '\' order by nu_id asc'
// }

//初始化
function init(record) {
  departId.value = record.id;
  orgCode.value = record.orgCode;
  searchQuery();
}

defineExpose({
  init
});

</script>

<style lang="less" scoped>

.jeecg-basic-table-form-container {
  padding: 0;
  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
  .query-group-cust{
    min-width: 100px !important;
  }
  .query-group-split-cust{
    width: 30px;
    display: inline-block;
    text-align: center
  }
  .ant-form-item:not(.ant-form-item-with-help){
    margin-bottom: 16px;
    height: 32px;
  }
  :deep(.ant-picker),:deep(.ant-input-number){
    width: 100%;
  }
}

.p-2{
  height: calc(100vh - 120px);
}

</style>