accout-vue3-ui/src/views/InvoiceSales/capitalClaim/index.vue

<script setup lang="ts">
import { ref } from "vue";
import { utils, writeFile } from "xlsx";
import { useRouter } from "vue-router";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { PageContent } from "/@/components/PageContent";
import PagePower from "/@/components/PagePower/PagePower.vue";
import ExeclUpload from "./components/execl-files-upload/index.vue";
import searchFormConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import { template } from "./config/xls-template";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import {
  xs_order_source_options,
  xs_order_type_options
} from "/@/utils/status";
import { usePermission } from "/@/hooks/core/usePermission";
import { useUserInfo } from "/@/hooks/core/useUser";
import { useAsync } from "/@/hooks/core/useAsync";
import { CAPITAL_STATUS } from "/@/utils/details/tragelog";
import { httpWithdraw } from "/@/api/InvoiceSales/capitalClaim";

const { push } = useRouter();

const execlUploadRef = ref<InstanceType<typeof ExeclUpload>>(null);

const pageName = "capitalClaim";

const { run: withDraw } = useAsync({
  success: () => pageContentRef.value.onSearch()
});

//  { code: "009", name: "撤销资金认领" },
//  { code: "029", name: "下载资金导入模板" },
//  { code: "030", name: "批量导入客户付款资金数据" }

const { hasPermissionWithCode, permissions } = usePermission(pageName);

const { isSuperUser } = useUserInfo();

const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
  undefined,
  undefined,
  searchFormConfig
);

const handleWithDraw = data => withDraw(httpWithdraw(data));

//导出模板
function onDownloadTemplate() {
  //创建数据表
  const workBook = utils.book_new();
  const workSheet = utils.json_to_sheet([template]);
  utils.book_append_sheet(workBook, workSheet, "sheet");

  //导出模板
  writeFile(workBook, "资金认领模板.xlsx", {
    bookType: "xlsx"
  });
}
</script>

<template>
  <div class="main role">
    <PagePower :is-show="hasPermissionWithCode('001')">
      <div w-full>
        <PageSearch
          :form-config="searchFormConfig"
          @search-btn-click="handleSearchClick"
          @reset-btn-click="handleResetClick"
        >
          <template #action>
            <el-button
              v-if="!isSuperUser && hasPermissionWithCode('029')"
              @click="onDownloadTemplate"
              >下载资金导入模板
            </el-button>
            <el-button
              v-if="!isSuperUser && hasPermissionWithCode('030')"
              type="primary"
              @click="() => execlUploadRef.onDisplay()"
              >批量导入客户付款资金数据
            </el-button>
          </template>
        </PageSearch>
        <PageContent
          ref="pageContentRef"
          :content-config="contentConfig"
          :powers="permissions"
          @preview-btn-click="
            row => push('/InvoiceSales/claimDetail?id=' + row.tradNo)
          "
        >
          <template #expand="row">
            <el-table
              v-if="row.child.length > 0"
              size="small"
              :data="row.child"
              border
              style="width: 100%"
            >
              <el-table-column
                label="资金认领编号"
                prop="logNo"
                width="188"
                fixed="left"
                show-overflow-tooltip
              />
              <el-table-column
                label="认领状态"
                prop="status"
                width="100"
                show-overflow-tooltip
              >
                <template #="{ $index }">
                  <el-tag
                    >{{
                      CAPITAL_STATUS.find(
                        t => t.value === row.child[$index].status
                      )?.label || "--"
                    }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                label="订单编号"
                prop="orderCode"
                width="160"
                show-overflow-tooltip
              />
              <el-table-column
                label="订单来源"
                prop="qrdSource"
                width="90"
                show-overflow-tooltip
              >
                <template #="{ $index }">
                  <el-tag
                    >{{
                      xs_order_source_options.find(
                        t => t.value === row.child[$index].qrdSource
                      )?.label
                    }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                label="平台单号"
                prop="poCode"
                width="180"
                show-overflow-tooltip
              />
              <el-table-column
                label="商品编号"
                prop="goodNo"
                width="160"
                show-overflow-tooltip
              />
              <el-table-column
                label="商品来源"
                prop="qrdType"
                width="90"
                show-overflow-tooltip
              >
                <template #="{ $index }">
                  <el-tag
                    >{{
                      xs_order_type_options.find(
                        t => t.value === row.child[$index].qrdType
                      )?.label
                    }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                label="商品名称"
                prop="goodName"
                minWidth="180"
                show-overflow-tooltip
              />

              <el-table-column
                label="订单创建人"
                prop="ownerName"
                width="80"
                show-overflow-tooltip
              />
              <el-table-column
                label="认领人"
                prop="apply_name"
                width="80"
                show-overflow-tooltip
              />
              <el-table-column
                label="认领时间"
                prop="addtime"
                width="145"
                show-overflow-tooltip
              />

              <el-table-column fixed="right" label="操作" width="60px">
                <template #default="{ row }">
                  <el-button
                    :icon="useRenderIcon('eye-view')"
                    @click="
                      () => push('/InvoiceSales/capitalDetail?id=' + row.logNo)
                    "
                    type="primary"
                    link
                  />
                  <el-popconfirm
                    v-if="
                      hasPermissionWithCode('009') && String(row.status) === '1'
                    "
                    placement="top"
                    title="是否确认撤销资金认领?"
                    :on-confirm="() => handleWithDraw({ logNo: row.logNo })"
                  >
                    <template #reference>
                      <el-button
                        :icon="useRenderIcon('refresh-right')"
                        type="primary"
                        link
                      />
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </PageContent>
      </div>
    </PagePower>

    <ExeclUpload ref="execlUploadRef" @onSuccess="handleResetClick" />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-button + .el-button) {
  margin-left: 0px !important;
}

.star {
  color: red;
}
</style>