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

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleEdit" v-if="getCheckPerm('algorithm-add')"
          >授权</a-button
        >
      </template>
      <template #copy="{ record }">
        <a @click="handleCopy(record.authorizeKey)">
          {{ record.authorizeKey }}
        </a>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              ifShow: getCheckPerm('algorithm-updata'),
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              color: 'error',
              ifShow: getCheckPerm('algorithm-delete'),
              onClick: handleDelete.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <AddModal @register="register" @update="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, h } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    TableImg,
    FormProps,
  } from '/@/components/Table';
  import {
    authorizeModelingList,
    authorizeModelingaddOrUpdate,
    authorizeModelingdelete,
  } from '/@/api/authorizeModeling';
  import { useModal } from '/@/components/Modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import AddModal from './AddModal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { incrementUseTypeList } from '/@/api/account';
  export default defineComponent({
    components: {
      BasicTable,
      AddModal,
      TableAction,
      TableImg,
    },
    setup() {
      const { t } = useI18n();
      const { createMessage, createConfirm } = useMessage();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      const [register, { openModal }] = 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: '算法授权Key',
          ellipsis: true,
          slots: { customRender: 'copy' },
          dataIndex: 'authorizeKey',
          width: 120,
        },
        {
          title: '授权期限',
          ellipsis: true,
          dataIndex: 'authorizeTime',
          width: 120,
          customRender: ({ record }) => {
            let obj = {
              1: '天',
              2: '个月',
              3: '年',
            };
            return record.authorizeTime + obj[record.authorizeTimeUnit];
          },
        },
        {
          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: 'authorizeKey',
            label: '算法授权Key',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
        ],
      };
      const [registerTable, { reload }] = useTable({
        api: authorizeModelingList,
        title: '算法授权列表',
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        actionColumn: {
          width: 100,
          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 authorizeModelingdelete({ id: record.id });
            reload();
            createMessage.success(t('common.optSuccess'));
          },
        });
      }
      function handleCopy(str: string) {
        let save = function (e) {
          e.clipboardData.setData('text/plain', str);
          e.preventDefault(); //阻止默认行为
        };
        document.addEventListener('copy', save); //添加一个copy事件
        document.execCommand('copy'); //执行copy方法
        createMessage.success('复制成功');
      }
      function handleEdit(record = {}) {
        openModal(true, {
          ...record,
          authorizeTime: `${record.authorizeTime || '10'}_${record.authorizeTimeUnit || '1'}`,
        });
      }
      return {
        registerTable,
        handleCopy,
        handleDelete,
        reload,
        register,
        getCheckPerm,
        handleEdit,
      };
    },
  });
</script>