DBSD_ZJPT/jeecgboot-vue3/src/views/bl/xxhbjwxtjxrw/components/CjdForm.vue

<template>
  <div class="p-2">
    <div class="jeecg-basic-table-form-container">
      <a-form ref="formRef2"  class="query-criteria">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-button type="primary" @click="handleFanhui" style="margin-top: 7px;">返回</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--查询区域-->
    <div class="jeecg-basic-table-form-container">
      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol" class="query-criteria">
        <a-row :gutter="24">
          <a-col :span="12"><span class="seleciton-line">1</span><span class="selection-title">成绩单</span> </a-col>
          <!-- <a-col :span="12" style="text-align: right">
            <a-button type="primary" @click="handleFanhui">返回</a-button>
          </a-col> -->
          <a-col :gutter="24">
            <div style="text-align: center; font-size:24px; font-weight: 700; line-height: 50px" v-if="jxrwInfo.value">
              {{ jxrwInfo?.value.xn }}{{ jxrwInfo?.value.xqmc }}学期《{{ jxrwInfo?.value.kcmc }}》
            </div>
            <div v-if="jxrwInfo.value">
              <div style="padding-left:14px; font-size:16px; font-weight: 700">概要信息</div>
              <a-row style="line-height: 30px">
                <a-col :span="5">
                  <span class="header-title" style="margin-left: 15px">开课单位</span> ：<span class="header-title">{{ jxrwInfo?.value.kkyxmc }}</span>
                </a-col>
                <a-col :span="5">
                  <span class="header-title" style="margin-left: 15px">课程类别</span> ：<span class="header-title">{{ jxrwInfo?.value.kclb }}</span>
                </a-col>
                <a-col :span="5">
                  <span class="header-title" style="margin-left: 15px">课程名称</span> ：<span class="header-title">{{ jxrwInfo?.value.kcmc }}</span>
                </a-col>
                <a-col :span="5">
                  <span class="header-title" style="margin-left: 15px">课程负责人</span> ：<span class="header-title">{{ jxrwInfo?.value.teaxm }}</span>
                </a-col>
                <a-col :span="4">
                  <span class="header-title" style="margin-left: 15px">选课人数</span> ：<span class="header-title">{{ jxrwInfo?.value.jxbrs }}</span>
                </a-col>
              </a-row>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- <div>
      详细信息
    </div> -->
    <!--引用表格-->
    <BasicTable @register="registerTable" class="table-style">
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
    <!-- 表单区域 -->
    <!-- <XxhbjwxtxsmdModal ref="registerModal" @success="handleSuccess"></XxhbjwxtxsmdModal> -->
  </div>
</template>

<script lang="ts" name="xxhbjwxtxsmd-xxhbjwxtxsmd" setup>
import { ref, reactive, defineExpose } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns3, superQuerySchema } from '/@/views/bl/xxhbjwxtxsmd/Xxhbjwxtxsmd.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from '/@/views/bl/xxhbjwxtxsmd/Xxhbjwxtxsmd.api';
import { downloadFile } from '/@/utils/common/renderUtils';
// import XxhbjwxtxsmdModal from './components/XxhbjwxtxsmdModal.vue'
import { useUserStore } from '/@/store/modules/user';
import { downloadFile as ajaxDownloadFileFn } from '/@/api/common/api';

const formRef = ref();
const queryParam = reactive<any>({});
const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref();
const userStore = useUserStore();
const spinning = ref<boolean>(false);
const emit = defineEmits(['callback']);

const jxrwInfo = reactive<any>({});
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  tableProps: {
    title: '详细信息',
    api: list,
    columns: columns3,
    canResize: false,
    useSearchForm: false,
    showActionColumn: false,
    actionColumn: {
      width: 120,
      fixed: 'right',
    },
    beforeFetch: async (params) => {
      return Object.assign(params, queryParam);
    },
  },
  exportConfig: {
    name: '教务系统学生名单',
    url: getExportUrl,
    params: queryParam,
  },
  importConfig: {
    url: getImportUrl,
    success: handleSuccess,
  },
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
  tableContext;
const labelCol = reactive({
  xs: 24,
  sm: 4,
  xl: 6,
  xxl: 4,
});
const wrapperCol = reactive({
  xs: 24,
  sm: 20,
});

function textDown() {
  var a = document.createElement('a'); //创建一个<a></a>标签
  a.href = '/download/a.docx';
  //给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
  a.download = 'a.docx';
  //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
  a.style.display = 'none'; // 障眼法藏起来a标签
  document.body.appendChild(a);
  // 将a标签追加到文档对象中
  a.click(); //模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
  a.remove();
  // 一次性的，用完就删除a标签
}

/**
 * 编辑事件
 */
function handleEdit(record: Recordable) {
  registerModal.value.disableSubmit = false;
  registerModal.value.edit(record);
}

/**
 * 成功回调
 */
function handleSuccess() {
  (selectedRowKeys.value = []) && reload();
}

/**
 * 操作栏
 */
function getTableAction(record) {
  if (record.studentPath) {
    return [
      {
        label: '预览',
        onClick: handleEdit.bind(null, record),
      },
      {
        label: '下载',
        onClick: handleEdit.bind(null, record),
      },
    ];
  } else {
    return [
      {
        label: '暂无文件',
        disabled: true,
      },
    ];
  }
}

/**
 * 查询
 */
function searchQuery() {
  reload();
}

/**
 * 重置
 */
function searchReset() {
  formRef.value.resetFields();
  selectedRowKeys.value = [];
  //刷新数据
  reload();
}

function handleFanhui() {
  emit('callback');
}

function init(record) {
  console.log('🧞', record);
  queryParam.kcrwdm = record.kcrwdm;
  jxrwInfo.value = record;
  reload();
}

defineExpose({
  init,
});
</script>

<style lang="less" scoped>
.jeecg-basic-table-form-container {
  padding: 0;
  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
  .query-group-cust {
    min-width: 100px !important;
  }
  .query-group-split-cust {
    width: 30px;
    display: inline-block;
    text-align: center;
  }
  .ant-form-item:not(.ant-form-item-with-help) {
    margin-bottom: 16px;
    height: 32px;
  }
  :deep(.ant-picker),
  :deep(.ant-input-number) {
    width: 100%;
  }
}
.selection-title{
font-size:18px;
font-weight: 700;
padding-left: 10px;
}
.seleciton-line{
  background: #1890ff;
  border-radius:10px ;
  color: #1890ff;
}
.header-title{
  font-size:16px;
  color: #666;
}
.query-criteria{
padding:10px 10px 15px 10px;
border:1px solid #e4e9f2;
border-radius:4px;
}
.query-criteria:hover{
border:1px solid #e4e9f2;
box-shadow: 2px 2px 10px 2px #e4e9f2;
border-radius:4px;
}
.table-style{
padding: 10px;
background: #fff;
border:1px solid #e4e9f2;
border-radius:4px;
}
.table-style:hover{
border:1px solid #e4e9f2;
box-shadow: 2px 2px 10px 2px #e4e9f2;
border-radius:4px;
}
</style>