4dkk_mp/src/views/empower/camera.vue

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleEdit" v-if="getCheckPerm('dealer-export')"
          >授权</a-button
        >
      </template>
      <template #copy="{ text }">
        <a @click="handleCopy(text)">
          {{ text }}
        </a>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '详情',
              ifShow: getCheckPerm('empowerCamera-detail'),
              onClick: handleDetail.bind(null, record),
            },
            {
              label: '编辑',
              ifShow: getCheckPerm('empowerCamera-updata'),
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              color: 'error',
              ifShow: getCheckPerm('empowerCamera-delete'),
              onClick: handleDelete.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <AddModal @register="register" @update="reload" />
    <DetailModal @register="registerDetail" @update="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, h } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    FormProps,
  } from '/@/components/Table';
  import {
    authorizeCameraList,
    authorizeCameradelete,
  } from '/@/api/authorizeModeling';
  import { useModal } from '/@/components/Modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import AddModal from './AddCameraModal.vue';
  import DetailModal from './detailModel.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { copyTextToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { incrementUseTypeList } from '/@/api/account';
  export default defineComponent({
    components: {
      BasicTable,
      AddModal,
      TableAction,
      DetailModal,
    },
    setup() {
      const { t } = useI18n();
      const { createMessage, createConfirm } = useMessage();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      const [register, { openModal }] = useModal();
      const [registerDetail, { openModal: opendetailModel }] = useModal();
      const columns: BasicColumn[] = [
        {
          title: '客户名称',
          dataIndex: 'customerName',
          ellipsis: true,
          width: 250,
        },
        {
          title: '客户类别',
          dataIndex: 'customerType',
          ellipsis: true,
          width: 80,
          customRender: ({ record }) => {
            return record.customerType == 1 ? '经销' : '直销';
          },
        },
        {
          title: '终端客户',
          ellipsis: true,
          dataIndex: 'endCustomer',
          width: 120,
        },
        {
          title: '使用类型',
          ellipsis: true,
          dataIndex: 'useTypeStr',
          width: 120,
        },
        {
          title: '项目号',
          ellipsis: true,
          dataIndex: 'projectNum',
          width: 120,
        },
        {
          title: '设备UUID',
          ellipsis: true,
          slots: { customRender: 'copy' },
          dataIndex: 'machineUuid',
          width: 120,
        },
        {
          title: '设备名称',
          ellipsis: true,
          slots: { customRender: 'copy' },
          dataIndex: 'machineName',
          width: 120,
        },
        {
          title: '相机授权Key',
          ellipsis: true,
          slots: { customRender: 'copy' },
          dataIndex: 'authorizeKey',
          width: 120,
        },
        {
          title: '授权相机数量',
          ellipsis: true,
          dataIndex: 'cameraNum',
          width: 120,
        },
        {
          title: '备注',
          ellipsis: true,
          dataIndex: 'remark',
          width: 120,
        },
        {
          title: '创建人',
          ellipsis: true,
          dataIndex: 'sysUserName',
          width: 120,
        },
        {
          title: '创建时间',
          ellipsis: true,
          dataIndex: 'createTime',
          width: 160,
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        autoSubmitOnEnter: true,
        schemas: [
          {
            field: 'customerName',
            label: '客户名称',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          {
            field: 'customerType',
            label: '客户类别',
            component: 'Select',
            componentProps: {
              options: [
                {
                  label: '直销',
                  value: 0,
                  key: '0',
                },
                {
                  label: '经销',
                  value: 1,
                  key: '1',
                },
              ],
            },
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          {
            field: 'useType',
            label: '使用类型',
            component: 'ApiSelect',
            componentProps: {
              api: incrementUseTypeList,
              labelField: 'name',
              valueField: 'id',
              immediate: true,
            },
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          {
            field: 'machineUuid',
            label: '设备UUID',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          {
            field: 'authorizeKey',
            label: '安装授权Key',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
        ],
      };
      const [registerTable, { reload }] = useTable({
        api: authorizeCameraList,
        title: '深时本地版相机授权',
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        actionColumn: {
          width: 150,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        rowKey: 'id',
        canResize: true,
      });
      async function handleDelete(record) {
        createConfirm({
          iconType: 'warning',
          title: () => h('span', '温馨提示'),
          content: () => h('span', '确定要删除授权吗？'),
          onOk: async () => {
            await authorizeCameradelete({ id: record.id });
            reload();
            createMessage.success(t('common.optSuccess'));
          },
        });
      }
      function handleEdit(record = {}) {
        openModal(true, record);
      }
      function handleDetail(record = {}) {
        opendetailModel(true, record);
      }
      function handleCopy(str: string) {
        copyTextToClipboard(str);
        createMessage.success('复制成功');
      }
      return {
        registerTable,
        handleCopy,
        handleDelete,
        reload,
        register,
        registerDetail,
        getCheckPerm,
        handleEdit,
        handleDetail,
      };
    },
  });
</script>