4dkk_mp/src/views/device/index.vue

<template>
  <PageWrapper contentBackground>
    <div class="desc-wrap-BasicTable">
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-button type="primary" @click="put" v-if="getCheckPerm('device-in')"> 入库</a-button>
          <a-button type="primary" @click="batchPut" v-if="getCheckPerm('device-all-in')"> 批量入库</a-button>
          <a-button type="primary" @click="batchOutflow" v-if="getCheckPerm('device-all-out')">批量出库</a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '删除',
                color: 'error',
                ifShow: getCheckPerm('device-delete') && !(Boolean(record.outType) || Boolean(record.userName)),
                onClick: handleDelete.bind(null, record),
              },{
                label: '出库',
                ifShow: getCheckPerm('device-out') && !Boolean(record.outType),
                onClick: handleCheckout.bind(null, record),
              },{
                label: '编辑',
                ifShow: getCheckPerm('device-update') && Boolean(record.outType),
                onClick: handleEdit.bind(null, record),
              },{
                label: '解绑',
                ifShow: getCheckPerm('device-unbind') && Boolean(record.userName),
                color: 'error',
                onClick: handleUnbind.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
    <batchOutflowModal @register="registerLinkModal" @reload="reload" />
    <detailModal @register="register" @reload="reload" />
    <batchPutModal @register="registerPut" @reload="reload" />
    <PutModal @register="registerEnter" @reload="reload" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, h, onMounted } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    TableImg,
    FormProps,
  } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { Descriptions } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { cameraList } from '/@/api/customer';
  import { cameraDelete } from '/@/api/device'
  import batchOutflowModal from './OutflowModal.vue';
  import detailModal from './detailsMoadl.vue';
  import batchPutModal from './batchPutModal.vue';
  import PutModal from './putModal.vue';
  import { useModal } from '/@/components/Modal';
  import { useRouter } from 'vue-router';
  import { UnbindCameraApi } from '/@/api/account';
  import { usePermissionStore } from '/@/store/modules/permission';
  export default defineComponent({
    components: {
      BasicTable,
      TableAction,
      PageWrapper,
      TableImg,
      batchOutflowModal,
      detailModal,
      batchPutModal,
      PutModal,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
    },
    setup() {
      const { t } = useI18n();
      const { createMessage, createConfirm } = useMessage();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      const [registerLinkModal, { openModal: openLinkModal }] = useModal();
      const [register, { openModal }] = useModal();
      const [registerPut, { openModal:openModalPut }] = useModal();
      const [registerEnter, { openModal:openModalEnter }] = useModal();
      const router = useRouter();
      const companyId: Number = router.currentRoute.value.params.id - 0;
      onMounted(() => {
        // console.log(router.currentRoute.value.params.id);
      });
      const columns: BasicColumn[] = [
        {
          title: 'SN码',
          dataIndex: 'snCode',
          width: 180,
        },
        {
          title: 'wifi名称',
          dataIndex: 'wifiName',
          width: 150,
        },
        {
          title: '设备类型',
          dataIndex: 'type',
          ellipsis: false,
          width: 80,  
          customRender: ({ record }) => {
            let typeObj ={
              '0':'旧双目相机',
              '1':'四维看看',
              '2':'四维看看lite',
              '9':'四维看见',
              '10':'四维深时',
            }
            return typeObj[record.type]
          }        
        },

        {
          title: '激活时间',
          dataIndex: 'activatedTime',
          width: 180,
        },
        {
          title: '出库类型',
          dataIndex: 'outType',
          width: 80,
          customRender: ({ record }) => {
            let typeObj ={
              '0':t('routes.product.outType.0'),
              '4':t('routes.product.outType.4'),
              '1':t('routes.product.outType.1'),
              '2':t('routes.product.outType.2'),
              '3':t('routes.product.outType.3'),
            }
            return typeObj[record.outType] || '未出库'
          }
        },
        {
          title: '经销商名称',
          dataIndex: 'agentName',
          ellipsis: false,
          width: 100,
        },
        {
          title: '客户名称',
          dataIndex: 'companyName',
          width: 80,
        },
        {
          title: '绑定账号',
          dataIndex: 'userName',
          width: 180,
          customRender({ record }) {
            return record.userName?record.userName:'未绑定'
          },
        },

        {
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          ifShow: true,
          fixed: 'right',
          flag: 'ACTION',
          width: 120,
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        // showAdvancedButton: true,
        autoAdvancedLine:1,
        actionColOptions: {
          span: 24,
        },
        // compact: true,
        schemas: [
          {
            field: 'snCode',
            component: 'Input',
            label: 'SN码',
            colProps: {
              xl: 6,
              xxl: 6,
            },
          },{
            field: 'type',
            component: 'Select',
            label: '设备类型',
            colProps: {
              xl: 6,
              xxl: 6,
            },
            componentProps: {
              options: [
                {
                  label: t('routes.product.type.0'),
                  value: 0,
                  key: '0',
                },{
                  label: t('routes.product.type.1'),
                  value: 1,
                  key: '1',
                },{
                  label: t('routes.product.type.2'),
                  value: 9,
                  key: '9',
                },{
                  label: t('routes.product.type.3'),
                  value: 10,
                  key: '10',
                },
              ],
            },
          },
          {
            field: 'ctivated',
            label: '激活时间',
            component: 'RangePicker',
            componentProps: {
              format: 'YYYY-MM-DD',
              valueFormat:'YYYY-MM-DD',
            },
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            field: 'outType',
            component: 'Select',
            label: '出库类型',
            colProps: {
              xl: 6,
              xxl: 6,
            },
            componentProps: {
              options: [
                {
                  label: t('routes.product.outType.0'),
                  value: 0,
                  key: '0',
                },{
                  label: t('routes.product.outType.4'),
                  value: 4,
                  key: '4',
                },{
                  label: t('routes.product.outType.1'),
                  value: 1,
                  key: '1',
                },{
                  label: t('routes.product.outType.2'),
                  value: 2,
                  key: '2',
                },{
                  label: t('routes.product.outType.3'),
                  value: 3,
                  key: '3',
                },
              ],
            },
          },
          {
            field: 'companyName',
            label: '客户名称',
            component: 'Input',
            colProps: {
              xl: 6,
              xxl: 6,
            },
            componentProps: {
              // api: brandTypeListApi,
              resultField: 'list',
              labelField: 'name',
              valueField: 'brandType',
              params: {
                page: 1,
                limit: 1000,
              },
            },
          },
          {
            field: 'agentName',
            component: 'Input',
            label: '经销商名称',
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            field: 'userName',
            component: 'Input',
            label: '绑定账号',
            colProps: {
              xl: 6,
              xxl: 6,
            },
          },
        ],
      };
      const [registerTable, { reload }] = useTable({
        api: cameraList,
        // title: '四维深时场景列表',
        // titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
        columns: columns,
        // rowSelection: { type: 'checkbox',onChange: onSelectChange },
        searchInfo: { companyId },
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn:false,
        rowKey: 'id',
        beforeFetch:(T)=>{
          if(T.ctivated){
            T.activatedStartTime = T.ctivated[0]
            T.activatedEndTime = T.ctivated[1]
          }
          return T
        },
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        canResize: false,
      });
      async function handleUnbind(record: Recordable) {
        createConfirm({
          iconType: 'warning',
          title: () => h('span', '温馨提示'),
          content: '解绑后用户将看不到该相机拍摄的场景。<br/>确定解绑吗?',
          onOk: async () => {
            await UnbindCameraApi({cameraId:record.id})
            createMessage.success(t('common.optSuccess'));
            reload()
          },
        });
      }
      async function handleDelete(record: Recordable){
        createConfirm({
          iconType: 'warning',
          title: () => h('span', '温馨提示'),
          content: '删除设备后需要重新入库<br/>确定删除吗?',
          onOk: async () => {
            await cameraDelete({id:record.id})
            createMessage.success(t('common.optSuccess'));
            reload()
          },
        });
      }

      function deviceLink() {
        openLinkModal(true);
      }
      function handleCheckout(record: Recordable) {
        openModal(true, {
          ...record,
          isUpdate: false,
        });
      }
      function handleEdit(record: Recordable) {
        openModal(true, {
          ...record,
          isUpdate: true,
        });
      }
      function put() {
        openModalEnter(true)
      }
      function batchPut() {
        console.log('批量入库');
        openModalPut(true, {})
      }
      function batchOutflow() {
        console.log('批量出库');
        openLinkModal(true, {})
      }
      return {
        registerTable,
        handleUnbind,
        deviceLink,
        registerLinkModal,
        register,
        registerEnter,
        put,
        batchPut,
        batchOutflow,
        handleEdit,
        handleCheckout,
        reload,
        handleDelete,
        registerPut,
        getCheckPerm,
      };
    },
  });
</script>
<style lang="less" scoped>
  .desc-wrap-BasicTable {
    background-color: #f0f2f5;
    .vben-basic-table-form-container {
      padding: 0;
    }
  }
</style>