sl-sfy-safety/src/views/cameras/overview/components/SharedTable.vue

<template>
  <div class="camera-share">
    <div class="flex items-center query-head">
      <el-space alignment="center" :size="50">
        <div style="display: flex">
          <div>公司名称：</div>
          <el-input
            v-model="queryName"
            clearable
            placeholder="请输入公司名称"
            class="query-content"
          />
        </div>
        <div>
          <span>公司账号：</span>
          <el-input
            v-model="queryAccount"
            clearable
            placeholder="请输入公司账号"
            class="query-content"
          />
        </div>
      </el-space>
      <div class="flex-1 flex justify-end">
        <el-button type="primary" @click="queryCameraItems"> 查询 </el-button>
        <el-button @click="resetSearch"> 重置 </el-button>
      </div>
    </div>
    <div class="camera-list">
      <!-- :data-source="props.addCameraType === 'complete' ? cameraCompleted : cameraIncompleted" -->
      <BasicTable
        :columns="getColumns(flattendWorkspaces)"
        :data-source="cameraShareList"
        :row-key="(row) => row.cameraIp"
        :action-column="actionColumn"
        :tableSetting="{
          size: false,
          redo: false,
          fullscreen: false,
          striped: false,
          setting: false,
        }"
        :striped="true"
        ref="tableRef"
      />
    </div>
    <CameraEditshared
      class="add-popover"
      v-model="shareEditedPopover"
      :edit-data="handleEditData"
    />
  </div>
</template>

<script setup lang="ts">
  import { h, reactive, ref, onMounted, watch, onBeforeMount } from 'vue';
  import { getColumns } from '../sharedColumns';
  import editIcon from '@/assets/images/table/table-edit.png';
  import deleteIcon from '@/assets/images/table/table-delete.png';
  import { BasicColumn, TableActionIconsWords, BasicTable } from '@/components/Table';
  import CameraEditshared from '../components/CameraEditshared.vue';
  import useCameraShare from '../stores/useCameraShare';
  import useSceneInfos from '@/hooks/useSceneInfos';
  import { CameraShareType } from '@/api/camera/camera-share';

  const useShare = useCameraShare();
  const {
    cameraShareList,
    queryName,
    queryAccount,
    isAddState,
    queryToTenantId,
    conditionSearch,
    handleDel,
    handleEdit,
  } = useShare;

  const sceneInfos = useSceneInfos();
  const { flattendWorkspaces, getScenesTree } = sceneInfos;

  const props = defineProps<{ addCameraType: string }>();
  onMounted(() => {
    isAddState.value = props.addCameraType === 'incomplete' ? false : true;
    console.log('isAddState', isAddState.value);
    queryToTenantId.value = -10;
    conditionSearch();
    console.log(cameraShareList.value);
  });

  const shareEditedPopover = ref<boolean>(false);

  const handleEditData = ref<CameraShareType>({} as CameraShareType);

  const handleEditDetail = (row) => {
    shareEditedPopover.value = true;
    row.cameraWorkspaceName = flattendWorkspaces.value?.find(
      (item) => item.id === Number(row.cameraWorkspace),
    )?.code;
    handleEditData.value = row;
  };

  // const updateData = (_data) => {
  //   // if (props.addCameraType === 'complete') {
  //   //   const indexToEdit = cameraIncompleted.value.findIndex(
  //   //     (item) => item.cameraIp === data.cameraIp,
  //   //   );
  //   //   cameraIncompleted.value[indexToEdit] = data;
  //   // } else {
  //   //   const indexToEdit = cameraCompleted.value.findIndex(
  //   //     (item) => item.cameraIp === data.cameraIp,
  //   //   );
  //   //   cameraCompleted.value[indexToEdit] = data;
  //   // }
  // };

  //添加按钮
  const handleChangeAdd = (row) => {
    const changeAddData = {
      id: row.id,
      isAdd: row.isAdd ? false : true,
    };
    handleEdit(changeAddData);
  };

  const handleDelete = (row) => {
    console.log('row', row);
    handleDel(row.id);
  };

  //操作列
  const actionColumn: BasicColumn = reactive({
    width: 200,
    title: '操作',
    prop: 'action',
    key: 'action',
    fixed: 'right',
    render(record) {
      return h(TableActionIconsWords as any, {
        space: 20,
        color: '#629bf9',
        style: 'img',
        size: 16,
        actionIcons: [
          {
            label: '添加',
            type: 'words' + props.addCameraType,
            onClick: handleChangeAdd.bind(null, record.row),
          },
          {
            label: '编辑',
            type: 'img',
            icon: editIcon,
            onClick: handleEditDetail.bind(null, record.row),
          },
          {
            label: '删除',
            type: 'img',
            icon: deleteIcon,
            onClick: handleDelete.bind(null, record.row),
          },
        ],
      });
    },
  });

  //查询
  const queryCameraItems = () => {
    isAddState.value = props.addCameraType === 'incomplete' ? false : true;
    conditionSearch();
  };
  //重置
  const resetSearch = () => {
    queryName.value = '';
    queryAccount.value = '';
  };

  watch(
    () => props.addCameraType,
    (_val) => {
      resetSearch();
      isAddState.value = props.addCameraType === 'incomplete' ? false : true;
      console.log('isAddState', isAddState.value);
      conditionSearch();
    },
  );

  onBeforeMount(() => {
    getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name', disabled: true });
  });
</script>

<style scoped>
  .type-select {
    width: 100px;
  }

  .query-content {
    width: 160px;
    margin-top: -6px;
  }

  .protocal-select {
    width: 160px;
  }

  .query-head {
    padding: 24px 57px 18px 21px;
  }

  .camera-share {
    position: relative;
    height: calc(100vh - 64px - 12px);
    background-color: #ffffff;
  }

  .camera-list {
    padding: 0 21px;
  }

  .add-popover {
    position: absolute;
    width: calc(100%);
    height: 622px;
    top: -57px;
    left: -20px;
    margin: auto;
    z-index: 99;
  }
</style>