onbus_crm.git - Gitblit

<template>
  <a-collapse class="customer-modal-document" v-model:activeKey="activeKey" ghost>
    <a-collapse-panel key="1" header="文档">
      <BasicTable
        @register="registerTable"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'cluesName'">
            <div>
              <FileImageFilled class="icon-color font-size-20px" />
              <a class="ml-5px c-black" data-index="{{index}}" @click="setImgVisible(record.id)">
                {{ record.cluesName }}
              </a>
              <a-image
                :style="{ display: 'none' }"
                :preview="{
                  visible: index == curImgIndex,
                  onVisibleChange: setImgVisible,
                }"
                :src="record.avatar"
              />
            </div>
          </template>
          <template v-else-if="column.key === 'action'">
            <TableAction
              stopButtonPropagation
              :dropDownActions="[
              {
                label: '发送邮件',
                onClick: handleWriteEmail.bind(null, record),
              },
              {
                label: '下载附件',
                onClick: handleDownloadFiles.bind(null, record),
              },
              {
                label: '删除文件',
                onClick: handleDeleteFiles.bind(null, record),
              },
            ]"
            />
          </template>
        </template>
 
      </BasicTable>
      <template #extra >
        <PlusCircleOutlined @click="addUploadFile" />
        <BasicUpload
          ref="uploadRef"
          :maxSize="20"
          :maxNumber="10"
          @change="handleUploadFileChange"
          :api="uploadApi"
          class="customer-modal-document-btn"
          :accept="['image/*']"
        />
      </template>
    </a-collapse-panel>
  </a-collapse>
 
  <ScheduleDetailModal @register="registerScheduleModal"></ScheduleDetailModal>
 
</template>
<script lang="ts" setup>
import {projectList} from './data';
import {PlusSquareOutlined,FileImageFilled,PlusCircleOutlined} from '@ant-design/icons-vue';
import {BasicArrow} from "@/components/Basic";
import {ref} from 'vue';
import ScheduleDetailModal from './ScheduleDetail.vue';
 
import EventBus from '@/utils/eventBus';
import {BasicTable, ColumnChangeParam, TableAction, useTable} from "@/components/Table";
import {cluesListApi} from "@/api/clues/table";
import {getEditCellColumns, getFormConfig} from "@/views/clues/components/tableData";
import {useModal} from "@/components/Modal";
import {uploadApi} from "@/api/sys/upload";
import {BasicUpload} from "@/components/Upload";
import {useMessage} from "@/hooks/web/useMessage";
 
const [registerScheduleModal, {openModal, setModalProps}] = useModal();
const openScheduleModal = () => {
  Logger.log('点击openScheduleModal');
  EventBus.emit('openScheduleModal', {
    title: '新建任务',
    content: '新建任务内容'
  });
};
 
// 获取子组件的引用
const uploadRef = ref();
function addUploadFile(event) {
    Logger.log('addUploadFile', event);
    event.stopPropagation();
    if (uploadRef.value) {
      Logger.log('uploadRef', uploadRef.value);
      uploadRef.value.openUploadModal();
    }
 
}
// const addUploadFile = (event: MouseEvent) => {
//   Logger.log('addUploadFile', event);
//   // If you don't want click extra trigger collapse, you can prevent this:
//   event.stopPropagation();
//
// };
const { createMessage } = useMessage();
function handleUploadFileChange(list: string[]) {
  createMessage.success(`已上传文件${JSON.stringify(list)}`);
}
 
const activeKey = ref(['1']);
 
const curImgIndex = ref<boolean>(-1);
const setImgVisible = (value): void => {
  Logger.log('setImgVisible', value);
  if (value === false) {
    curImgIndex.value = -1;
  } else {
    curImgIndex.value = value;
  }
  // imgVisible.value = value;
};
 
const [
  registerTable,
  {
    // setLoading,
    // setProps,
    // getColumns,
    // getDataSource,
    // getRawDataSource,
    // reload,
    // getPaginationRef,
    // setPagination,
    // getSelectRows,
    // getSelectRowKeys,
    // setSelectedRowKeys,
    // clearSelectedRowKeys,
  },
] = useTable({
  canResize: true,
  api: cluesListApi,
  // beforeFetch: (params) => {
  //   console.log('beforeFetch', params);
  //   params.pageNo = params.page;
  //   // return Promise.resolve(params);
  // },
  showIndexColumn: false,
  columns: [
    {
      title: '文件名称',
      // defaultHidden: true,
      dataIndex: 'cluesName',
      width: 200
    },
    {
      title: '关联类型',
      dataIndex: 'statusId',
      width: 200,
    },
    {
      title: '文件大小',
      dataIndex: 'formId',
      width: 80,
    },
    {
      title: '添加人',
      dataIndex: 'name',
      width: 80,
    },
    {
      title: '上传日期',
      dataIndex: 'archiveTime',
      width: 200,
    },
 
  ],
  // defSort: {
  //   pageNo: 1,
  //   pageSize: 20,
  //   field: 'name',
  //   order: 'ascend',
  // },
  rowKey: 'id',
  // showTableSetting: false,
  // showIndexColumn: false, // 是否显示序号列
  // useSearchForm: false, // 使用搜索表单
  // clickToRowSelect: false,
  pagination: {
    // pageSize: 20,
    pageSizeOptions: ['10', '20', '50', '100'],
    defaultPageSize: 20,
    // showSizeChanger: true,
  },
  actionColumn: {
    width: 50,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
  },
  useSearchForm: true, // 使用搜索表单
  formConfig: {
    // labelWidth: 100,
    // layout: 'horizontal',
    rowProps: {
      // justify: 'start',
      gutter: 12,
    },
    showActionButtonGroup: false,
    // showResetButton: false,
    // showSubmitButton: false,
    schemas: [
      {
        field: `field1`,
        label: ``,
        component: 'Input',
        componentProps: {
          placeholder: '搜索文档名称',
        },
        colProps: {
          span:8,
        },
      },
      {
        field: 'recurringDates',
        label: '',
        component: 'Select',
        colProps: {
          span:8,
        },
        componentProps: {
          options: [
            {
              label: '全部类型',
              value: '1',
            },
            {
              label: '邮件附件',
              value: '2',
            },
            {
              label: '手动上传',
              value: '3',
            },
            {
              label: '销售订单已导单据',
              value: '4',
            },
            {
              label: '报价单已导单据',
              value: '5',
            },
          ],
        },
        defaultValue: '1'
      },
      {
        field: '[startDate, endDate]',
        label: '',
        component: 'RangePicker',
        componentProps: {
          style: {width: '100%'},
          format: 'YYYY-MM-DD',
          placeholder: ['开始日期、时间', '结束日期、时间'],
          // showTime: {format: 'HH:mm:ss'},
        },
        colProps: {
          span:8,
        },
      },
    ],
  },
 
});
 
 
 
function handleWriteEmail(record: Recordable) {
  Logger.log('点击了写邮件', record);
}
function handleDownloadFiles(record: Recordable) {
  Logger.log('点击了下载文件', record);
}
function handleDeleteFiles(record: Recordable) {
  Logger.log('点击了删除文件', record);
}
 
</script>
<style lang="less" scoped>
.customer-modal-document{
  .icon-color{
    color: #1890ff;
  }
  :deep(&-btn) .ant-space{
    display: none;
  }
  :deep(.ant-collapse-content-box), :deep(.onbus-basic-table) {
    padding: 0;
  }
}
 
 
</style>