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

<template>
  <div style="width: 100%">
    <div class="flex flex-col items-center add-body">
      <el-form
        class="range-form"
        :inline="true"
        :model="cameraRangeData"
        :rules="rules"
        label-width="84px"
        label-position="left"
      >
        <el-form-item
          v-for="item in cameraRangeAddForm"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :label-width="item.labelWidth"
        >
          <el-input
            v-if="item.type === 'input'"
            v-model="cameraRangeData[item.prop]"
            :placeholder="item.placeholder"
            style="width: 200px"
          />
          <el-select
            v-if="item.type === 'select'"
            v-model="cameraRangeData[item.prop]"
            :placeholder="item.placeholder"
            style="width: 200px"
          >
            <el-option
              v-for="protocal in item.option"
              :key="protocal.value"
              :label="protocal.label"
              :value="protocal.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="flex justify-end" style="width: 100%">
        <el-button type="primary" class="btn-r" @click="searchRangeCamera">搜索</el-button>
      </div>
      <div class="search-list">
        <BasicTable
          style="height: 274px"
          :columns="columns"
          :data-source="cameraItems"
          :row-key="(row) => row.name"
          :action-column="actionColumn"
          :pagination="false"
          :tableSetting="{
            size: false,
            redo: false,
            fullscreen: false,
            striped: false,
            setting: false,
          }"
          :row-class-name="getRowClassName"
          ref="tableRef"
          @order-change="orderByItem"
          @selection-change="handleSelectionChange"
        >
          <template #empty>
            <div class="empty-content flex flex-col items-center">
              <img :src="emptyImg" class="empty-img" />
              <span class="empty-text">目前无内容，请先添加相机</span>
            </div>
          </template>
        </BasicTable>
      </div>
      <EditCamera v-model="showEditPop" style="z-index: 9" :edit-data="editRow" />
    </div>
    <span class="pop-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </span>
  </div>
</template>

<script setup lang="ts">
  import { computed, h, reactive, ref } from 'vue';
  import { CameraRangeItem, CameraIPItem } from '../type';
  import { cameraRangeAddForm } from '../constant';
  import SearchCamerasAction from './SearchCamerasAction.vue';
  import { BasicTable } from '@/components/Table';
  import { BasicColumn } from '@/components/Table';
  import { columns } from '../searchRangeColumns';
  import emptyImg from '@/assets/images/table/table-empty.png';
  import editIcon from '@/assets/images/table/table-edit.png';
  import deleteIcon from '@/assets/images/table/table-delete.png';
  import EditCamera from './CameraEditPopover.vue';

  const emits = defineEmits(['cancel-execute', 'confirm-execute']);

  const cameraRangeData = ref<CameraRangeItem>({} as CameraRangeItem);

  const showEditPop = ref(false);
  const editRow = ref<CameraIPItem | null>(null);

  const rules = computed(() => {
    const newRule = {};
    cameraRangeAddForm.forEach((item) => {
      if (item.required) {
        newRule[item.prop] = item.rule;
      }
    });
    return newRule;
  });

  //操作列
  const actionColumn: BasicColumn = reactive({
    width: 150,
    title: '操作',
    prop: 'action',
    key: 'action',
    fixed: 'right',
    render(record) {
      return h(SearchCamerasAction as any, {
        activeColor: '#629bf9',
        unactiveColor: 'rgba(0,0,0,0.4)',
        tableTextActions: [
          {
            label: '添加',
            disabled: false,
            onclick: handleAdd.bind(null, record.row),
          },
        ],
        tableIconActions: {
          space: 10,
          color: '#629bf9',
          style: 'img',
          size: 16,
          actionIcons: [
            {
              label: '编辑',
              icon: editIcon,
              onClick: handleEdit.bind(null, record.row),
            },
            {
              label: '删除',
              icon: deleteIcon,
              onClick: handleDelete.bind(null, record.row),
            },
          ],
        },
      });
    },
  });

  const getRowClassName = (record) => {
    return record.row.name !== 'SHGD-XDJS-0003' ? 'warm-row' : '';
  };

  const cameraItems = reactive([
    {
      cameraIp: '10.10.10.10',
      protocal: '海康威视',
      cameraPort: '8080',
      mac: '255.255.255.255',
      name: 'SHGD-XDJS-0001',
      workshopId: 'ARJ21部装车间',
      workspaceId: '200工位',
      networkState: 1,
      status: 1,
    },
    {
      cameraIp: '10.10.10.10',
      protocal: '海康威视',
      cameraPort: '8080',
      mac: '255.255.255.255',
      name: 'SHGD-XDJS-0002',
      workshopId: 'ARJ21部装车间',
      workspaceId: '200工位',
      networkState: 1,
      status: 1,
    },
    {
      cameraIp: '10.10.10.10',
      protocal: '海康威视',
      cameraPort: '8080',
      mac: '255.255.255.255',
      name: 'SHGD-XDJS-0003',
      workshopId: 'ARJ21部装车间',
      workspaceId: '200工位',
      networkState: 1,
      status: 1,
    },
    {
      cameraIp: '10.10.10.10',
      protocal: '海康威视',
      cameraPort: '8080',
      mac: '255.255.255.255',
      name: 'SHGD-XDJS-0004',
      workshopId: 'ARJ21部装车间',
      workspaceId: '200工位',
      networkState: 1,
      status: 1,
    },
    {
      cameraIp: '10.10.10.10',
      protocal: '海康威视',
      cameraPort: '8080',
      mac: '255.255.255.255',
      name: 'SHGD-XDJS-0005',
      workshopId: 'ARJ21部装车间',
      workspaceId: '200工位',
      networkState: 1,
      status: 1,
    },
  ]);

  const searchRangeCamera = () => {};

  // 列排序操作
  const orderByItem = () => {};

  const handleSelectionChange = (val: any[]) => {
    console.log(val);
  };

  const handleAdd = () => {};

  const handleDelete = () => {};

  const handleEdit = (row) => {
    showEditPop.value = true;
    editRow.value = row;
  };

  const handleCancel = () => {
    emits('cancel-execute');
  };

  const handleConfirm = () => {};
</script>

<style scoped>
  .add-body {
    width: 100%;
  }

  .range-form {
    width: 1082px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-around;
    margin-bottom: -12px;
  }

  .btn-r {
    margin-right: 24px;
  }

  .search-list {
    width: 100%;
    height: 300px;
    padding: 0 28px;
    margin-bottom: 40px;
  }

  .pop-footer {
    position: absolute;
    right: 24px;
    bottom: 27px;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.el-form-item__label) {
    font-size: 14px;
    color: #363636;
    padding: 0;
  }
  :deep(.el-form--inline .el-form-item) {
    display: flex;
    margin-right: 0;
    margin-bottom: 28px;
  }
  :deep(.el-table .warm-row) {
    background: #f9e6e5 !important;
    --el-table-row-hover-bg-color: none;
    --el-bg-color: none;
  }
</style>