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

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleEdit" v-if="getCheckPerm('empowerCamera-add')"
          >授权</a-button
        >
      </template>
      <template #copy="{ text }">
        <a @click="handleCopy(text)">
          {{ text }}
        </a>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '详情',
              ifShow: getCheckPerm('empowerCamera-loglist'),
              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 './modal/camera/AddCameraModal.vue';
  import DetailModal from './modal/camera/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: 'companyName',
          ellipsis: true,
          width: 230,
        },
        {
          title: '业务部门',
          dataIndex: 'businessDept',
          ellipsis: true,
          width: 120,
        },
        {
          title: '业务员',
          dataIndex: 'businessName',
          ellipsis: true,
          width: 120,
        },
        {
          title: '客户付款时间',
          dataIndex: 'customerPayTime',
          ellipsis: true,
          width: 160,
        },
        {
          title: '客户名称',
          dataIndex: 'customerName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '客户类别',
          dataIndex: 'customerType',
          ellipsis: true,
          width: 80,
          customRender: ({ record }) => {
            return record.customerType == 1 ? '经销' : record.customerType == 0 ? '直销' : '';
          },
        },
        {
          title: '终端客户',
          ellipsis: true,
          dataIndex: 'endCustomer',
          width: 120,
        },
        {
          title: '使用类型',
          ellipsis: true,
          dataIndex: 'useTypeStr',
          width: 120,
        },
        {
          title: '项目号',
          ellipsis: true,
          dataIndex: 'projectNum',
          width: 120,
        },
        {
          title: '机器码',
          ellipsis: true,
          slots: { customRender: 'copy' },
          dataIndex: 'machineCode',
          width: 120,
        },
        {
          title: '算法授权码',
          ellipsis: true,
          slots: { customRender: 'copy' },
          dataIndex: 'modelAuthCode',
          width: 120,
        },
        {
          title: '相机授权Key',
          ellipsis: true,
          slots: { customRender: 'copy' },
          dataIndex: 'authorizeKey',
          width: 120,
        },
        {
          title: '相机SN码',
          ellipsis: true,
          dataIndex: 'snCodes',
          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: 'companyName',
            component: 'Select',
            label: '合同所属公司',
            colProps: {
              span: 8,
            },
            itemProps: {
              autoLink: false,
            },
            componentProps: {
              options: [
                {
                  label: '珠海市四维时代网络科技有限公司',
                  value: '珠海市四维时代网络科技有限公司',
                  key: '珠海市四维时代网络科技有限公司',
                },
                {
                  label: '广东四维看看智能设备有限公司',
                  value: '广东四维看看智能设备有限公司',
                  key: '广东四维看看智能设备有限公司',
                },
                {
                  label: '四维看看（香港）有限公司',
                  value: '四维看看（香港）有限公司',
                  key: '四维看看（香港）有限公司',
                },
                {
                  label: '四维看看(北京)数据科技有限公司',
                  value: '四维看看(北京)数据科技有限公司',
                  key: '四维看看(北京)数据科技有限公司',
                },
              ],
            },
          },
          {
            field: 'businessDept',
            component: 'Select',
            label: '业务部门',
            colProps: {
              span: 8,
            },
            itemProps: {
              autoLink: false,
            },
            componentProps: {
              options: [
                {
                  label: '数字营销事业部',
                  value: '数字营销事业部',
                  key: '数字营销事业部',
                },
                {
                  label: '政企事业部',
                  value: '政企事业部',
                  key: '政企事业部',
                },
                {
                  label: '海外事业部',
                  value: '海外事业部',
                  key: '海外事业部',
                },
                {
                  label: '市场部',
                  value: '市场部',
                  key: '市场部',
                },
                {
                  label: '总经办',
                  value: '总经办',
                  key: '总经办',
                },
                {
                  label: '考古和不可移动文物保护事业部',
                  value: '考古和不可移动文物保护事业部',
                  key: '考古和不可移动文物保护事业部',
                },
              ],
            },
          },
          {
            field: 'machineCode',
            label: '机器码',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          {
            field: 'modelAuthCode',
            label: '算法授权码',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
            componentProps: {
              maxlength: 100,
            },
          },
          {
            field: 'snCode',
            label: '相机SN码',
            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>