hi-ucs/front/src/views/home/infrastructureApplication.vue

<!--
 * @Author: Light
 * @Date: 2022-11-18 11:53:43
 * @LastEditors: Light
 * @LastEditTime: 2022-11-22 10:54:46
 * @Description: 告诉大家这是什么
-->
<template>
  <div class="infrastructureApplication">
    <div class="top">
      <a-list size="small" bordered :data-source="dataList.toBeApplied">
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="name">
              <a-tooltip>
                <template #title>{{ item.channelName }}</template>
                {{ item.channelName }}
              </a-tooltip>
            </div>
            <a-popconfirm
              :title="'是否移出' + item.channelName + '?'"
              ok-text="是"
              cancel-text="否"
              @confirm="delWillApplyCamera(item.id)"
            >
              <a-button type="link" danger>移出</a-button>
            </a-popconfirm>
          </a-list-item>
        </template>
        <template #header>
          <div class="title">待申请列表</div>
        </template>
        <template #footer>
          <a-button type="primary" @click="apply">一键申请</a-button>
        </template>
      </a-list>
    </div>
    <div class="bottom">
      <a-list size="small" bordered :data-source="dataList.requested">
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="name">
              <a-tooltip>
                <template #title>{{ item.cameraInfo.channelName }}</template>
                {{ item.cameraInfo.channelName }}
              </a-tooltip>
            </div>
            <a-popconfirm
              v-if="item.approveStatus == '通过'"
              :title="'是否删除' + item.cameraInfo.channelName + '?'"
              ok-text="是"
              cancel-text="否"
              @confirm="deleteApply(item)"
            >
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
            <a-button v-else type="link" danger @click="deleteApply(item)">
              删除
            </a-button>
          </a-list-item>
        </template>
        <template #header>
          <div class="title">已申请列表</div>
        </template>
      </a-list>
    </div>
  </div>
  <a-modal
    :width="800"
    v-model:visible="visible"
    title="删除申请"
    @ok="handleOk"
    @cancel="clear"
  >
    <p>本次申请的摄像头包含以下{{ showArr.length }}个摄像头，是否删除申请？</p>
    <a-table :columns="columns" :data-source="showArr">
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          <a>{{ text }}</a>
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
<script setup>
  import {
    willApplyCameraSelect,
    willApplyCameraBatchInsert,
    willApplyCameraBatchDelete,
    getApplyCameraListXha,
    delApplyCamera,
  } from '@/api/home'
  import { endProcess } from '@/api/personalCenter.js'
  import { onBeforeUnmount, reactive, ref } from 'vue'
  import { message } from 'ant-design-vue'
  import mybus from '@/myplugins/mybus'
  import { useRouter } from 'vue-router'
  const dataList = reactive({ toBeApplied: [], requested: [] })
  // 待办
  const addWacFlag = ref(true)
  const delWacFlag = ref(true)
  const delApply = ref(true)
  const visible = ref(false)
  const instanceId = ref('')
  const showArr = ref({})
  const columns = [
    {
      title: '名称',
      dataIndex: 'channelName',
      key: 'channelName',
    },
    {
      title: '地址',
      dataIndex: 'managementUnitName',
      key: 'managementUnitName',
    },
    {
      title: '类型',
      dataIndex: 'cameraPointTypeName',
      key: 'cameraPointTypeName',
      ellipsis: true,
    },
  ]
  const router = useRouter()
  const delWillApplyCamera = (id) => {
    console.log('删除===>', id)
    if (delWacFlag.value) {
      delWacFlag.value = false
      willApplyCameraBatchDelete([id]).then((res) => {
        if (res.data.code == 0) {
          message.success('移出成功')
        } else {
          message.warning('移出失败')
        }
        init()
      })
    }
  }
  const apply = () => {
    let obj = {
      arr: [
        {
          checked: true,
          delFlag: 0,
          id: '1593084734789996545',
          idtCameraChannel: '790582098133127168',
          loading: false,
          note1: '',
          resourceId: '1522550195055828996',
          resourceName: '摄像头列表',
          type: '基础设施',
        },
      ],
      deptName: '西海岸新区工业和信息化局',
      deptId: '732560225344761856',
    }
    dataList.toBeApplied.map((val) => {
      val.type = '基础设施'
      val.delFlag = 0
      val.resourceId = val.channelId
      val.resourceName = val.channelName
      // obj.arr.push(val)
    })
    obj.arr[0].note1 = JSON.stringify(dataList.toBeApplied)
    if (obj.arr.length > 0) {
      console.log('一键申请===================>', obj)
      localStorage.setItem('applyList', JSON.stringify([obj]))
      router.push({
        path: '/apply',
      })
    }
  }
  // 删除已申请
  const deleteApply = (item) => {
    console.log('删除========>', item)
    if (delApply.value) {
      delApply.value = false
      switch (item.approveStatus) {
        case '审核中':
          visible.value = true
          instanceId.value = item.instanceId
          showArr.value = []
          dataList.requested.map((val) => {
            if (val.instanceId == item.instanceId) {
              showArr.value.push(val.cameraInfo)
            }
          })
          break
        case '通过':
          delApplyCamera([item.id]).then((res) => {
            if (res.data.code == 0) {
              message.success('删除成功')
            } else {
              message.warning('删除失败')
            }
            initApply()
          })
          break
      }
    }
  }
  const handleOk = () => {
    endProcess({ instanceId: instanceId.value }).then((res) => {
      if (res.data.code == 0) {
        message.success('删除成功')
      } else {
        message.warning('删除失败')
      }
      initApply()
      visible.value = false
    })
  }
  const clear = () => {
    instanceId.value = ''
    showArr.value = []
    visible.value = false
    delApply.value = true
  }
  const init = () => {
    willApplyCameraSelect().then((res) => {
      if (res.data.code == 0) {
        dataList.toBeApplied = res.data.data
        delWacFlag.value = true
        addWacFlag.value = true
      } else {
        message.warning('查询失败')
        dataList.toBeApplied = []
      }
    })
  }
  const initApply = () => {
    getApplyCameraListXha().then((res) => {
      if (res.data.code == 0) {
        res.data.data.map((val) => {
          val.cameraInfo = JSON.parse(val.cameraInfo)
        })
        dataList.requested = res.data.data
        delApply.value = true
      } else {
        message.warning('查询失败')
        dataList.requested = []
      }
    })
  }
  init()
  initApply()
  mybus.on('selectCamera', (obj) => {
    // 判断最多10条
    if (dataList.toBeApplied.length + dataList.requested.length >= 10) {
      message.warning('最多只能申请10个摄像头！')
      return
    }
    // 判断是否已操作
    let addFlag = true
    dataList.toBeApplied.map((val) => {
      if (addFlag && val.channelId == obj.channelId) {
        addFlag = false
      }
    })
    dataList.requested.map((val) => {
      console.log('111', val, addFlag)
      if (addFlag && val.cameraInfo.channelId == obj.channelId) {
        addFlag = false
      }
    })
    if (addWacFlag.value) {
      if (addFlag) {
        addWacFlag.value = false
        willApplyCameraBatchInsert([obj]).then((res) => {
          if (res.data.code == 0) {
            message.success('移入成功')
          } else {
            message.warning('移入失败')
          }
          init()
        })
      } else {
        message.warning('已申请该摄像头！')
      }
    }
  })
  onBeforeUnmount(() => {
    mybus.off('selectCamera')
  })
</script>
<style lang="less" scoped>
  .infrastructureApplication {
    background: #fff;
    position: fixed;
    top: 50%;
    right: 0.16rem;
    margin-top: -3.5rem;
    .bottom {
      margin-top: 32px;
    }
    .title {
      font-size: 16px;
      font-weight: 600;
    }
    .name {
      width: 150px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
    :deep(.ant-list-footer) {
      display: flex;
      justify-content: flex-end;
    }
    :deep(.ant-list-items) {
      width: 2.5rem;
      height: 2.45rem;
      overflow-y: scroll;
    }
    :deep(.ant-spin-nested-loading) {
      width: 2.5rem;
      height: 2.45rem;
    }
  }
</style>