feat:完善客户Drawer详情

Sanakey

6 天以前 cb165187ddcf5d9cfd8aad97a2868d0343b14bd9

 src/views/customer/components/drawer/Document.vue

@@ -1,21 +1,60 @@
<template>
  <a-collapse v-model:activeKey="activeKey" ghost>
  <a-collapse class="customer-modal-document" v-model:activeKey="activeKey" ghost>
    <a-collapse-panel key="1" header="文档">
      <BasicTable
        @register="registerTable"
        @row-click="handleScheduleRowClick"
      >
        <template #bodyCell="{ column, record }">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'cluesName'">
            <div>
              <a-avatar :size="16" :style="'background-color:'+ record.color"></a-avatar>
              <span class="ml-5px">
            {{ record.cluesName }}
          </span>
              <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>

@@ -24,7 +63,7 @@
</template>
<script lang="ts" setup>
import {projectList} from './data';
import {PlusSquareOutlined} from '@ant-design/icons-vue';
import {PlusSquareOutlined,FileImageFilled,PlusCircleOutlined} from '@ant-design/icons-vue';
import {BasicArrow} from "@/components/Basic";
import {ref} from 'vue';
import ScheduleDetailModal from './ScheduleDetail.vue';
@@ -34,6 +73,9 @@
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 = () => {
@@ -44,23 +86,39 @@
  });
};

// 获取子组件的引用
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 pagination = {
  onChange: (page: number) => {
    console.log(page);
  },
  pageSize: 3,
};

const openChange = (status: boolean) => {
  Logger.log('openChange', status);
};
const dropDownTitle = ref('未完成');
const onMenuItemClick = (e: any) => {
  let titles = ['未完成', '已完成'];
  Logger.log('onMenuItemClick', e);
  dropDownTitle.value = titles[e.key];
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 [
@@ -90,16 +148,32 @@
  showIndexColumn: false,
  columns: [
    {
      // title: '',
      title: '文件名称',
      // defaultHidden: true,
      dataIndex: 'cluesName',
      width: 200
    },
    {
      // title: '',
      title: '关联类型',
      dataIndex: 'statusId',
      width: 200,
    },
    {
      title: '文件大小',
      dataIndex: 'formId',
      width: 80,
    },
    {
      title: '添加人',
      dataIndex: 'name',
      width: 80,
    },
    {
      title: '上传日期',
      dataIndex: 'archiveTime',
      width: 200,
    },

  ],
  // defSort: {
  //   pageNo: 1,
@@ -112,27 +186,118 @@
  // showIndexColumn: false, // 是否显示序号列
  // useSearchForm: false, // 使用搜索表单
  // clickToRowSelect: false,
  // formConfig: getFormConfig(), // 搜索表单配置
  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 handleScheduleRowClick(e) {
  Logger.log('handleScheduleRowClick', e);
  openModal(true, {
    // record,
    // isUpdate: true,
  });
function handleWriteEmail(record: Recordable) {
  Logger.log('点击了写邮件', record);
}
function handleDownloadFiles(record: Recordable) {
  Logger.log('点击了下载文件', record);
}
function handleDeleteFiles(record: Recordable) {
  Logger.log('点击了删除文件', record);
}

const prefixCls = 'account-center-project';
</script>
<style lang="less" >
<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>