gypsy-crm-frontend-vu/pages/mine/components/FileManagementTab.vue

<template>
  <view>
    <!--        <view class="content-title" v-t="'PersonalManagement.Title.FileManagement'"></view>-->
    <view v-show="!loading" class="content-title">
      <view />
      <view v-if="isShowBtn" class="content-title-btns">


        <button hover-class="" v-if="!isShowBtn.isSHowIdentity" type="button"
          class="btn btn-danger btn-shadow waves-effect" @click="openAddFileDialog(1)">
          <view class="d-flex align-items-center">
            <cwg-icon name="crm-plus" :size="14" color="#fff" />
            <text v-t="'PersonalManagement.Title.ProofOfIdentity'" />
          </view>
        </button>
        <button hover-class="" v-if="!isShowBtn.isSHowAddress" type="button"
          class="btn btn-danger btn-shadow waves-effect" @click="openAddFileDialog(2)">
          <view class="d-flex align-items-center">
            <cwg-icon name="crm-plus" :size="14" color="#fff" />
            <text v-t="'PersonalManagement.Title.ProofOfAddress'" />
          </view>
        </button>
        <button hover-class="" type="button" class="btn btn-danger btn-shadow waves-effect"
          @click="openAddFileDialog(3)">
          <view class="d-flex align-items-center">
            <cwg-icon name="crm-plus" :size="14" color="#fff" />
            <text v-t="'PersonalManagement.Title.AttachedFile'" />
          </view>
        </button>

      </view>
    </view>
    <cwg-tabel ref="tableRef" :columns="columns" :api="customFileApi" :show-operation="false" :showPagination="false">
      <template #type="{ row }">
        <view :class="['status-badge', row.status]">{{ typeMap[row.type] }}</view>
      </template>
      <template #status="{ row }">
        <view class="table-cell-center">
          <view :class="['status-badge', row.status]">{{ stateMap[row.status] }}</view>
        </view>
      </template>
      <template #btn="{ row }">
        <view class="table-cell-center">
          <button hover-class="" class="btn-submit" :class="['operation-btn', row.status !== 4 ? 'disabled' : '']"
            :disabled="row.status !== 4" @click.stop="openAddFile(row)">
            <cwg-icon name="crm-image" :size="16" color="#1d293d" />
            <text v-t="'State.Again'" />
          </button>
        </view>
      </template>
    </cwg-tabel>

    <add-file-dialog ref="addFileDialog" @file-added="customFileList" @success="addSuccess" />
  </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import AddFileDialog from './AddFileDialog.vue';
const { t } = useI18n();
import { personalApi } from '@/service/personal';
const stateMap = computed(() => ({
  1: t('State.ToBeProcessed'),
  2: t('State.Completed'),
  3: t('State.Refused'),
  4: t('State.Again')
}));
const typeMap = computed(() => ({
  1: t('PersonalManagement.Title.ProofOfIdentity'),
  2: t('PersonalManagement.Title.ProofOfIdentity'),
  3: t('PersonalManagement.Title.ProofOfAddress'),
  4: t('PersonalManagement.Title.ProofOfAddress'),
  10: t('PersonalManagement.Title.AttachedFile')
}));
const btnMap = computed(() => ({
  1: t('PersonalManagement.Title.ProofOfIdentity'),
  2: t('PersonalManagement.Title.ProofOfAddress'),
  3: t('PersonalManagement.Title.AttachedFile')
}));
interface Props {
  icon: string;
  label: string;
  value: string;
  isLast?: boolean;
}
const tableRef = ref<any>(null);
const tableData = computed(() => {
  return tableRef.value ? tableRef.value.tableData : [];
});
const loading = ref(false)
const isShowBtn = ref()
const setShowBtn = () => {
  const a = tableData.value
  let tableIdentity = [];
  const tableAddress = [];
  const tableAdditional = [];
  a.forEach((item) => {
    if (item.type == 1 || item.type == 2) {
      tableIdentity.push(item);
    } else if (item.type == 3) {
      tableAddress.push(item);
    } else {
      tableAdditional.push(item);
    }
  });
  const isSHowIdentity = tableIdentity.length > 1;
  const isSHowAddress = tableAddress.length > 0;
  isShowBtn.value = { isSHowIdentity, isSHowAddress };
}

// 表格列配置
const columns = computed(() => [
  {
    prop: 'path',
    label: t('vu.item20'),
    type: 'file',
    align: 'center'
  },
  {
    prop: 'type',
    label: t('PersonalManagement.Label.FileName'),
    align: 'left',
    slot: 'type'
  },
  {
    prop: 'uploadTime',
    label: t('PersonalManagement.Label.UploadDate'),
    type: 'date',
    dateFormat: 'YYYY-MM-DD HH:mm',
    align: 'left'
  },
  {
    prop: 'status',
    label: t('PersonalManagement.Label.State'),
    type: 'tag',
    tagMap: { 1: '启用', 10: '禁用' },
    tagTypeMap: { 1: 'success', 0: 'danger' },
    slot: 'status',
    align: 'center'
  },
  {
    prop: 'btn',
    label: t('Label.Action'),
    slot: 'btn',
    align: 'center'
  }
])

const addFileDialog = ref(null);
const customFileApi = ref(null)
customFileApi.value = personalApi.customFileList
const openAddFileDialog = (type) => {
  addFileDialog.value.open({ type, title: btnMap.value[type], tableData: tableData.value });
}
const openAddFile = (row) => {
  if (row.status != 4) {
    return
  }
  let type
  switch (row.type) {
    case 1:
      type = 1
      break;
    case 2:
      type = 1
      break;
    case 3:
      type = 2
      break;
    case 10:
      type = 3
      break;
  }
  addFileDialog.value.open({ type, title: btnMap.value[type], tableData: tableData.value, currentFile: row });
}
const addSuccess = () => {
  tableRef.value.refreshTable()
}

watch(tableData, (newVal) => {
  if (newVal && newVal.length > 0) {
    loading.value = true
    setShowBtn()
    setTimeout(() => {
      loading.value = false

    }, 300)
  }
}, { immediate: true })

defineProps<Props>();
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.btn {
  margin: 0;
}

.avatar {
  width: px2rpx(60);
  height: px2rpx(60);
  border-radius: 4px;
}

.content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: px2rpx(20);
  font-weight: 500;

  .content-title-btns {
    margin: px2rpx(8) 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    //flex-wrap: wrap;
    gap: px2rpx(5);

    .btn-primary {
      min-width: px2rpx(80);
      background-color: var(--color-error);
      color: white;
      padding: 0 px2rpx(10);
      border: none;
      border-radius: px2rpx(8);
      font-size: px2rpx(16);
      text-align: center;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      //gap: px2rpx(5);
    }

    .btn-primary:active {
      background-color: #cf1322;
      ;
    }
  }
}

.operation-btn {
  display: flex;
  width: auto;
  align-items: center;
  justify-content: center;
  padding: 0 px2rpx(10);
  box-sizing: border-box;
  height: px2rpx(36);
  line-height: px2rpx(36);

  :deep(span) {
    font-size: px2rpx(14);
  }
}

.table-cell-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.operation-btn.disabled {
  cursor: not-allowed;
  opacity: 0.5;

  :deep(span) {
    cursor: not-allowed;
  }
}
</style>