aida_front/src/component/Administrator/SE/allUser/index.vue

<template>
  <div class="admin_page all-user">
    <div class="admin_table_search">
      <div class="admin_state">
        <div class="admin_state_item">
          <span>{{ $t('admin.CreateTime') }}:</span>
          <a-range-picker
            style="width: 230px"
            class="range_picker"
            v-model:value="rangePickerValue"
            :placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
            valueFormat="YYYY-MM-DD"
          >
            <template #suffixIcon>
              <span class="icon iconfont range_picker_icon icon-rili"></span>
            </template>
          </a-range-picker>
        </div>
        <!-- <div class="admin_state_item">
                    <span>Country or Region:</span>
					<a-select
                        v-model:value="country"
						:allowClear="true"
						show-search
                        style="width: 230px"
                        :filter-option="filterOption"
                        placeholder="Select Item..."
                        max-tag-count="responsive"
                        :options="allCountry"
                    ></a-select>
                </div> -->
        <!-- <div class="admin_state_item">
                    <span>Email:</span>
                    <input
                        v-model="email"
                        placeholder="Please enter email"
                        @keydown.enter="gettrialList"
                        type="text"
                        style="width: 230px"
                    />
                </div> -->
        <div class="admin_state_item">
          <span>{{ $t('admin.UserName') }}:</span>
          <a-select
            v-model:value="ids"
            mode="multiple"
            style="width: 230px"
            :field-names="{ label: 'label', value: 'label' }"
            :filter-option="filterOption"
            :placeholder="$t('admin.selectUserName')"
            max-tag-count="responsive"
            :options="allUserList"
            @keydown.enter="gettrialList"
          ></a-select>
        </div>
        <!-- <div class="admin_state_item">
                    <span>User Type:</span>
                    <a-select
                        v-model:value="systemUser"
                        size="large"
                        style="width: 230px"
                        optionFilterProp="label"
                        :options="state"
                        placeholder="Please select"
                        allowClear
                        show-search
                    ></a-select>
                </div> -->
      </div>
      <div class="admin_search">
        <div class="admin_search_item" @click="searchHistoryList">
          {{ $t('admin.search') }}
        </div>
        <div class="admin_search_item" @click="addhHistoryList">
          {{ $t('admin.add') }}
        </div>
        <div
          class="admin_search_item"
          style="width: auto; padding: 0 2rem"
          @click="downloadTemplate"
        >
          {{ $t('admin.DownloadTemplate') }}
        </div>
        <div
          class="admin_search_item"
          style="width: auto; padding: 0 2rem"
          @click="uploadTemplate"
        >
          {{ $t('admin.UploadTemplate') }}
        </div>
        <div
          class="admin_search_item"
          style="width: auto; padding: 0 2rem"
          @click="ExportAccountData"
        >
          {{ $t('admin.ExportAccountData') }}
        </div>
        <div
          class="admin_search_item"
          style="width: auto; padding: 0 2rem"
          @click="deleteList"
        >
          {{ $t('admin.Delete') }}
        </div>
      </div>
      <div class="admin_state_list">
        <div class="admin_state_list_item" @click="lastGeTrialList('year')">
          {{ $t('admin.NearlyAYear') }}
        </div>
        <div class="admin_state_list_item" @click="lastGeTrialList('month')">
          {{ $t('admin.LastMonth') }}
        </div>
        <div class="admin_state_list_item" @click="lastGeTrialList('week')">
          {{ $t('admin.LastWeek') }}
        </div>
      </div>
    </div>
    <div class="admin_table_content" ref="historyTable">
      <a-table
        @resizeColumn="handleResizeColumn"
        :loading="tableLoading"
        :columns="columns"
        :data-source="dataList"
        :row-selection="rowSelection"
        rowKey="id"
        :scroll="{ y: historyTableHeight }"
        @change="changePage"
        :showSorterTooltip="false"
        :pagination="{
          showSizeChanger: true,
          current: currentPage,
          pageSize: pageSize,
          total: total,
          showQuickJumper: true,
          bordered: false
        }"
      >
        <template #bodyCell="{ column, text, record, index }">
          <div class="operate_list" v-if="column?.Operations">
            <div
              class="operate_item"
              @click="setAagree(record)"
              style="margin-right: 2rem"
            >
              {{ $t('admin.Edit') }}
            </div>
            <div class="operate_item" @click="deleteAagree(record)">
              {{ $t('admin.Delete') }}
            </div>
            <!-- <div
							class="operate_item"
							@click="deleteGroup(record, index)"
						>
							Delete
						</div> -->
          </div>
        </template>
      </a-table>
    </div>
    <allUserPoerationsVue
      ref="allUserPoerationsVue"
      @searchHistoryList="searchHistoryList"
    ></allUserPoerationsVue>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  createVNode,
  computed,
  reactive,
  toRefs,
  onMounted
} from 'vue'
import { formatTime } from '@/tool/util'
import { useStore } from 'vuex'
import { Https } from '@/tool/https'
import { Modal, message } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import allUserPoerationsVue from './addAllUser.vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({
  components: { allUserPoerationsVue },
  setup() {
    const store: any = useStore()
    const selectedRowKeys = ref([]) as any
    const onSelectChange = (changableRowKeys: string[]) => {
      selectedRowKeys.value = changableRowKeys
    }
    let filter: any = reactive({
      dataList: [],
      tableLoading: false,
      allUserList: computed(() => {
        return store.state.adminPage.allUserList
      }),
      allCountry: [],
      rowSelection: computed(() => {
        return {
          selectedRowKeys: unref(selectedRowKeys),
          onChange: onSelectChange
        }
      })
    })
    const { t } = useI18n()

    let filterData: any = reactive({
      rangePickerValue: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      country: '',
      email: '',
      userType: '',
      ids: [],
      occupation: '',
      systemUser: '',
      order: '', //'Ascending  升序 Descending 降序'
      orderBy: '',
      userName: ''
    })

    let renameData: any = ref({}) //修改名字选中的数据
    const columns: any = computed(() => {
      return [
        {
          title: t('admin.UserId'),
          align: 'center',
          dataIndex: 'id',
          key: 'id',
          width: 100,
          fixed: 'left',
          sorter: true
        },
        {
          title: t('admin.Email'),
          align: 'center',
          dataIndex: 'userEmail',
          key: 'userEmail',
          width: 200,
          ellipsis: true
        },
        {
          title: t('admin.UserName'),
          align: 'center',
          dataIndex: 'userName',
          key: 'userName',
          width: 150,
          ellipsis: true
          // customRender: (record: any) => {
          //     let time = formatTime(
          //         record.text / 1000,
          //         "YYYY-MM-DD hh:mm:ss"
          //     );
          //     return time;
          // },
        },
        {
          title: t('admin.language'),
          align: 'center',
          dataIndex: 'language',
          key: 'language',
          width: 100,
          ellipsis: true,
          customRender: (record: any) => {
            return t(`admin.${record.text}`)
          }
        },
        {
          title: t('admin.CreateDate'),
          align: 'center',
          dataIndex: 'createDate',
          key: 'createDate',
          width: 200,
          sorter: true
        },
        {
          title: t('admin.Credits'),
          align: 'center',
          // width: 150,
          // minWidth: 100,
          // maxWidth: 200,
          // resizable: true,
          dataIndex: 'credits',
          key: 'credits',
          width: 100,
          sorter: true
        },
        {
          title: t('admin.CreditsUsage'),
          align: 'center',
          dataIndex: 'creditsUsage',
          key: 'creditsUsage',
          width: 150,
          sorter: true
        },
        {
          title: t('admin.CreditsUsageLimit'),
          align: 'center',
          dataIndex: 'creditsUsageLimit',
          key: 'creditsUsageLimit',
          width: 200,
          sorter: true
        },
        {
          title: t('admin.Operations'),
          key: 'operation',
          width: 120,
          align: 'center',
          fixed: 'right',
          // slots:{customRender:'action'}
          Operations: true
        }
      ]
    })
    //改变页码
    let changePage = (e: any, filters: any, sorter: any) => {
      filterData.currentPage = e.current
      filterData.pageSize = e.pageSize
      if (sorter.order) {
        if (sorter.columnKey == 'id') {
          filterData.orderBy = 'id'
        } else if (sorter.columnKey == 'createDate') {
          filterData.orderBy = 'time'
        } else if (sorter.columnKey == 'credits') {
          filterData.orderBy = 'credits'
        }
      }
      if (sorter.order) {
        filterData.order = sorter.order == 'descend' ? 'Descending' : 'Ascending'
      } else {
        filterData.order = ''
      }

      gettrialList()
    }

    //查询列表
    let searchHistoryList = () => {
      filterData.currentPage = 1
      gettrialList()
    }
    let clearHistoryList = () => {
      ;(filterData.rangePickerValue = []),
        (filterData.currentPage = 1),
        (filterData.pageSize = 10),
        (filterData.total = 0),
        (filterData.country = ''),
        (filterData.email = ''),
        (filterData.userType = ''),
        (filterData.ids = []),
        (filterData.occupation = ''),
        (filterData.order = ''), //'Ascending  升序 Descending 降序'
        (filterData.orderBy = ''), //'Ascending  升序 Descending 降序'
        (filterData.systemUser = ''),
        (filterData.userName = '')
    }
    let setHistoryListData = () => {
      let startDate: any = filterData.rangePickerValue?.[0]
        ? filterData.rangePickerValue[0] + ' ' + '00:00:00'
        : ''
      let endDate: any = filterData.rangePickerValue?.[1]
        ? filterData.rangePickerValue[1] + ' ' + '23:59:59'
        : ''
      let data = {
        endTime: endDate,
        startTime: startDate,
        size: filterData.pageSize,
        page: filterData.currentPage,
        systemUser: filterData.systemUser,
        country: filterData.country,
        // email: filterData.email.trim(),
        userType: filterData.userType,
        ids: [],
        occupation: filterData.occupation,
        order: filterData.order,
        orderBy: filterData.orderBy,
        // userName: filterData.userName,
        userName: filterData.ids
      }
      return data
    }
    //获取列表
    let gettrialList = () => {
      filter.tableLoading = true
      let data = setHistoryListData()
      Https.axiosPost(Https.httpUrls.subAccountList, data).then((rv: any) => {
        if (rv) {
          console.log(rv)
          // this.dataList = rv
          filter.dataList = rv.content
          filterData.total = rv.total
          filter.tableLoading = false

          // this.workspaceItem.position = this.singleTypeList[0].label
        }
      })
    }
    let lastGeTrialList = (str: string) => {
      clearHistoryList()
      let currentDate = new Date()
      let currentTimestamp = Math.floor(currentDate.getTime() / 1000)
      // 计算30天前的时间戳
      let thirtyDaysAgoTimestamp
      if (str == 'year') {
        thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60
      } else if (str == 'month') {
        thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60
      } else if (str == 'week') {
        thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60
      }
      filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp, 'YYYY-MM-DD')
      gettrialList()
    }
    let filterOption = (input: any, option: any) => {
      // 使用 option.label 进行搜索
      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
    let addhHistoryList = () => {
      allUserPoerationsVue.value.init({ value: 'Add', label: t('admin.add') }, '')
    }
    let allUserPoerationsVue = ref()
    let setAagree = (data: any) => {
      allUserPoerationsVue.value.init({ value: 'Edit', label: t('admin.Edit') }, data)
    }
    const downloadTemplate = () => {
      Https.axiosGet(Https.httpUrls.subAccountImportExcelDownload, {
        responseType: 'blob',
        env: { binary: true }
      }).then((rv: any) => {
        const link = document.createElement('a')
        link.href = rv.url
        link.download = 'file.xlsx' // 设置正确的文件扩展名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        // 释放 URL 对象
        URL.revokeObjectURL(link.href)
      })
    }
    const ExportAccountData = () => {
      Https.axiosGet(Https.httpUrls.exportAccountsToExcel, {
        headers: { responseType: 'blob' },
        env: {
          binary: true,
          binaryType:
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
        }
      }).then((rv: any) => {
        const link = document.createElement('a')
        link.href = rv.url
        link.download = 'file.xlsx' // 设置正确的文件扩展名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        // 释放 URL 对象
        URL.revokeObjectURL(link.href)
      })
    }
    const uploadTemplate = () => {
      const fileInput = document.createElement('input')
      fileInput.type = 'file'
      fileInput.accept = '.xlsx' // 只接受 .xlsx 文件
      fileInput.onchange = (event: any) => {
        const file = event.target.files[0] // 获取选择的文件
        if (file) {
          let param = new FormData()
          param.append('file', file)
          let config: any = {
            headers: { 'Content-Type': 'multipart/form-data', 'Accept': '*/*' }
          }
          Https.axiosPost(Https.httpUrls.subAccountImport, param, config).then(
            (rv: any) => {
              gettrialList()
            }
          )
        }
      }
      fileInput.click()
    }
    const confirmDelete = () => {
      return new Promise<void>((resolve, reject) => {
        Modal.confirm({
          title: t('admin.jsDelete'),
          icon: createVNode(ExclamationCircleOutlined),
          okText: 'Yes',
          cancelText: 'No',
          centered: true,
          onOk() {
            resolve(true)
          },
          onCancel() {
            resolve(false)
          }
        })
      })
    }
    const deleteList = async () => {
      console.log(selectedRowKeys.value)
      if (selectedRowKeys.value.length == 0) return
      let boolean: any = await confirmDelete()
      if (!boolean) {
        return
      }
      Https.axiosPost(Https.httpUrls.deleteSubAccount, {
        deleteIdList: selectedRowKeys.value
      }).then((rv: any) => {
        gettrialList()
      })
    }
    const deleteAagree = async (event: any) => {
      let boolean: any = await confirmDelete()
      if (!boolean) {
        return
      }
      const value = {
        deleteIdList: [event.id]
      }
      Https.axiosPost(Https.httpUrls.deleteSubAccount, value).then((rv: any) => {
        gettrialList()
      })
    }
    onMounted(() => {
      let allCountry: any = sessionStorage.getItem('allCountry')
      if (allCountry) {
        filter.allCountry = JSON.parse(allCountry)
      }
      gettrialList()
    })
    return {
      ...toRefs(filter),
      ...toRefs(filterData),
      columns,
      renameData,
      changePage,
      searchHistoryList,
      addhHistoryList,
      lastGeTrialList,
      gettrialList,
      filterOption,
      allUserPoerationsVue,
      setAagree,
      downloadTemplate,
      ExportAccountData,
      uploadTemplate,
      deleteList,
      deleteAagree
    }
  },
  data() {
    return {
      historyTableHeight: 0,
      handleResizeColumn: (w: any, col: any) => {
        col.width = w
      }
    }
  },
  mounted() {
    let historyTable: any = this.$refs.historyTable
    this.historyTableHeight = historyTable.clientHeight - 200
  },
  methods: {}
})
</script>
<style lang="less" scoped>
.admin_page .admin_table_search .admin_state {
  display: flex;
  width: 70%;
  flex-wrap: wrap;
  align-content: flex-start;
}
.admin_page .admin_table_search .admin_search {
  display: flex;
  flex-wrap: wrap;
  width: 30%;
  > .admin_search_item {
    height: 4rem;
    font-size: 1.6rem;
  }
}
.all-user {
  .admin_table_content {
    :deep(.ant-table-wrapper) {
      overflow: hidden ;
    }
  }
}
</style>