dbsd_kczx/src/views/kc/ktgl/KcKechengbiaoList.vue

<template>
  <div>
    <!--查询区域-->
    <div class="jeecg-basic-table-form-container">
      <a-form @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :lg="8">
            <a-form-item label="开课单位">
              <!-- <a-input placeholder="请输入开课单位" v-model:value="queryParam.kkdw"></a-input> -->
              <j-dict-select-tag placeholder="请选择开课单位" v-model:value="queryParam.kkdw" dictCode="kc_kkdw_view,kkdw,id"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8">
            <a-form-item label="星期">
              <j-dict-select-tag placeholder="请选择星期" v-model:value="queryParam.week" dictCode="week"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8">
            <a-form-item label="节次">
              <j-dict-select-tag placeholder="请选择节次" v-model:value="queryParam.hh" dictCode="skjc"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8">
            <a-form-item label="课程性质">
              <!-- <a-input placeholder="请输入课程性质" v-model:value="queryParam.kcxz"></a-input> -->
              <j-dict-select-tag v-model:value="queryParam.kcxz" dictCode="kcxz" placeholder="请选择课程性质"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8">
            <a-form-item label="课程名称或教师名">
              <a-input placeholder="请输入课程名称或教师名" v-model:value="queryParam.searchInput"></a-input>
            </a-form-item>
          </a-col>
          <!-- <a-col :lg="8">
            <a-form-item label="授课教师">
              <a-input placeholder="请输入授课教师" v-model:value="queryParam.skjs"></a-input>
            </a-form-item>
          </a-col> -->
          <!--<template v-if="toggleSearchStatus">-->
          <!--</template>-->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :lg="6">
                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
                <!--<a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
                </a>-->
              </a-col>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <vxe-toolbar>
      <template #buttons>
        <a-button type="primary" class="pl1r" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
        <a-button type="primary" class="pl1r" @click="handleEdit" preIcon="ant-design:plus-outlined"> 修改</a-button>
        <a-button type="danger"  class="pl1r" @click="batchHandleDelete" preIcon="ant-design:delete-outlined">删除</a-button>
        <!-- <vxe-button @click="insertEvent">新增</vxe-button>
        <vxe-button @click="$refs.xTable.removeCheckboxRow()">删除选中</vxe-button>
        <vxe-button @click="saveEvent">保存</vxe-button> -->
      </template>
    </vxe-toolbar>
    <JVxeTable
      ref="tableRef"
      row-number
      row-selection
      keep-source
      clickSelectRow
      bordered
      rowSelectionType="radio"
      :loading="loading"
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      style="margin-top: 8px"
      @pageChange="handlePageChange"
      @valueChange="valueChange"
      @selectRowChange="selectRowChange"
    >
    <!-- @save="save"
      @added="added"
      @removed="removed"
      @inserted="inserted"
      @dragged="dragged" -->
      <template #toolbarSuffix>
        <!-- <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
        <a-button type="primary" @click="handleEdit" preIcon="ant-design:plus-outlined"> 修改</a-button>
        <a-button type="danger" @click="batchHandleDelete" preIcon="ant-design:delete-outlined">删除</a-button> -->
        <!-- <a-button  type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
        <j-upload-button  type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作
            <Icon icon="mdi:chevron-down"></Icon>
          </a-button>
        </a-dropdown> -->
      </template>
    </JVxeTable>
    <!--引用表格-->

    <!-- 表单区域 -->
    <KcKechengbiaoModal ref="registerModal" @success="handleSuccess"></KcKechengbiaoModal>
    <!-- -{{ selectedRows }}- -->
    <KcKetangbiaoList v-show="selectedRows[0]" :currentRowKey="selectedRows[0]"/>
  </div>
</template>

<script lang="ts" name="ktgl-kcKechengbiao" setup>
  import { ref, reactive, onMounted } from 'vue';
  // import { BasicTable, useTable, TableAction } from '/@/components/Table';
  // import { useListPage } from '/@/ho   oks/system/useListPage';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { columns } from './KcKechengbiao.data';
  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, saveOrUpdate } from './KcKechengbiao.api';
  // import { downloadFile } from '/@/utils/common/renderUtils';
  import KcKechengbiaoModal from './components/KcKechengbiaoModal.vue'
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import KcKetangbiaoList from './KcKetangbiaoList.vue'

  import { JVxeColumn, JVxeTableInstance, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
  import { filterObj } from '/@/utils/common/compUtils';
  // import { random } from 'lodash-es';
  // import { buildUUID } from '/@/utils/uuid';
  // import { uploadUrl } from '/@/api/common/api';

  const tableRef = ref<JVxeTableInstance>();
  // const { createMessage } = useMessage();
  const loading = ref(false);
  const columns = ref<JVxeColumn[]>([
    // {
    //   title: '下拉框_字典表搜索',
    //   key: 'select_dict_search',
    //   type: JVxeTypes.selectDictSearch,
    //   width: 200,
    //   async: true, // 异步搜索，默认为 true
    //   // 字典表配置信息：数据库表名,显示字段名,存储字段名
    //   dict: 'sys_user,realname,username',
    //   tipsContent: '请输入查询条件',
    // },
    // {
    //   title: '单选',
    //   key: 'radio',
    //   type: JVxeTypes.radio,
    //   width: 130,
    //   options: [
    //     { text: '男', value: '1' },
    //     { text: '女', value: '2' },
    //   ],
    //   // 允许清除选择（再点一次取消选择）
    //   allowClear: false,
    // },

    {
      title: '课程编号',
      align: "left",
      width: '300px',
      key: 'kcbh',
    },
    {
      title: '课程名称',
      align: "left",
      key: 'kcmc'
    },
    {
      title: '授课教师',
      align: "left",
      key: 'skjs'
    },
    {
      title: '学科人数',
      align: "left",
      width: '80px',
      key: 'xkrs'
    },
    {
      title: '开课单位',
      align: "left",
      width: '100px',
      key: 'kkdw_dictText'
    },
    {
      title: '课程性质',
      align: "left",
      width: '105px',
      key: 'kcxz_dictText'
    },
    {
      title: '上课地点',
      align: "left",
      width: '100px',
      key: 'skdd'
    },
    {
      title: '上课周次',
      align: "left",
      width: '100px',
      key: 'jkzc_dictText'
    },
    {
      title: '节次',
      align: "left",
      width: '70px',
      key: 'hh_dictText'
    },
    {
      title: '星期',
      align: "left",
      width: '70px',
      key: 'week_dictText'
    },
    {
      title: '学分',
      align: "left",
      width: '50px',
      key: 'xf'
    },

    {
      title: '是否出镜',
      key: 'sfcj',
      type: JVxeTypes.selectSearch,
      width: 100,
      options: [
        { label: '是', value: 0, },
        { label: '否', value: 1, },
      ],
    },
    {
      title: '上课形式',
      key: 'skxs',
      type: JVxeTypes.selectSearch,
      width: 100,
      options: [
        { label: '线上', value: 0, },
        { label: '线下', value: 1, },
        { label: '线上线下混合', value: 2, },
      ],
    },

  // {
  //   title: '是否出镜',
  //   align: "center",
  //   dataIndex: 'sfcj',
  //   edit: true,
  //   editComponent: 'Select',
  //   editComponentProps: {
  //     options: [
  //       { label: '是', value: 0, },
  //       { label: '否', value: 1, },
  //     ],
  //   },
  // },


  // {
  //   title: '上课形式',
  //   align: "center",
  //   dataIndex: 'skxs',
  //   edit: true,
  //   editComponent: 'Select',
  //   editComponentProps: {
  //     options: [
  //       { label: '线上', value: 0, },
  //       { label: '线下', value: 1, },
  //       { label: '线上线下混合', value: 2, },
  //     ],
  //   },
  // },

  ]);
  const dataSource = ref<any[]>([]);
  const pagination = reactive({
    current: 1,
    pageSize: 5,
    pageSizeOptions: ['10', '20', '30', '100', '200'],
    total: 0,
  });

  // randomPage(pagination.current, pagination.pageSize, true);

  // 当分页参数变化时触发的事件
  // function handlePageChange(...e) {
  //   alert('????')
  //   console.log('handlePageChange','?????????');
  //   //{current, pageSize }
  //   console.log('handlePageChange',e);

    // 重新赋值
    // pagination.current = current;
    // pagination.pageSize = pageSize;
    // 查询数据
    // loadData(1);
    // randomPage(event.current, event.pageSize, true);
  // }

  // function save() {
    // console.log('save',...data);
  // }
  // function added(...data) {
  //   console.log('added',...data);
  // }
  // function removed(...data) {
  //   console.log('removed',...data);
  // }
  // function inserted(...data) {
  //   console.log('inserted',...data);
  // }
  // function dragged(...data) {
  //   console.log('dragged',...data);
  // }
  function selectRowChange({ selectedRowIds, selectedRows: rows, $table }) {

    console.log(`🚀 --------------------------------------------------------------------🚀`);
    console.log(`🚀 ~ file: KcKechengbiaoList.vue:323 ~ selectRowChange ~ rows:`, rows,selectedRows);
    console.log(`🚀 --------------------------------------------------------------------🚀`);

    if(rows && rows[0]){
      selectedRows.value = Array<never>(rows[0])
    }else{
      selectedRows.value = [];
    }
    // console.log('selectRowChange',selectedRowIds,rows, tableRef);
    // //action == selected

    // if(rows && rows.length){
    //   let id = rows[0]?.id
    //   // let { row } = tableRef.value!.getIfRowById(id)
    //   let row = dataSource.value.filter(x => x.id == id);

    //   console.log(`🚀 ------------------------------------------------------------------🚀`);
    //   console.log(`🚀 ~ file: KcKechengbiaoList.vue:330 ~ selectRowChange ~ row:`, row);
    //   console.log(`🚀 ------------------------------------------------------------------🚀`);

    //   $table.clearCheckboxRow().then(() => {
    //     $table.setCheckboxRow(row,true);
    //   })

      // console.log(`🚀 ------------------------------------------------------------------🚀`);
      // console.log(`🚀 ~ file: KcKechengbiaoList.vue:329 ~ selectRowChange ~ row:`, row);
      // console.log(`🚀 ------------------------------------------------------------------🚀`);

    // }
    // tableRef.value!.toggleCheckboxRow(rows[0])

    // if(selectedRowIds.length == 2){
    //   selectedRowKeys.value = Array<never>(selectedRowIds[0]);
    //   selectedRows.value = Array<never>(rows[0]);
    // }else{
    //   selectedRowKeys.value = selectedRowIds[0];
    //   selectedRows.value = rows[0];
    // }


  }
  function handlePageChange(event) {
    console.log('pageChange',event);
    // 重新赋值
    pagination.current = event.current;
    pagination.pageSize = event.pageSize;
    //查询数据
    loadData(null);
  }
  function valueChange({ value, col, row }) {
    // console.log('valueChange',...data);
    //异步改数据
    // temp1.value
    let key = col?.key
    let id = row?.id
    saveByCell({ value, key, id })
  }

  /** 获取值，忽略表单验证 */
  function handleTableGet() {
    const values = tableRef.value!.getTableData();
    console.log('获取值:', { values });
    createMessage.success('获取值成功，请看控制台输出');
  }

  /* 随机生成分页数据 */
  // function randomPage(current, pageSize, $loading = false) {
  //   if ($loading) {
  //     loading.value = true;
  //   }
  //   let begin = Date.now();
  //   let values: any[] = [];
  //   for (let i = 0; i < pageSize; i++) {
  //     let radio = random(0, 2);
  //     values.push({
  //       id: buildUUID(),
  //       select_dict_search: ['admin', '', 'jeecg'][random(0, 2)],
  //       progress: random(0, 100),
  //       radio: radio ? radio.toString() : null,
  //     });
  //   }
  //   dataSource.value = values;
  //   let end = Date.now();
  //   let diff = end - begin;
  //   if ($loading && diff < pageSize) {
  //     setTimeout(() => (loading.value = false), pageSize - diff);
  //   }
  // }


  const selectedRows = ref([]);
  const selectedRowKeys = ref([]);
  // const reload = () => {}
  onMounted(() => {
    loadData(1);
  })
  function reload() {
    //自己写吧。。
    loadData(1);
  }
  function loadData(pageNo:any | null | undefined){
    loading.value = true;
    if(pageNo == 1){
      pagination.current = 1;
    }
    //参数
    let { current, pageSize } = pagination;
    let param = { column: 'createTime', order: 'desc', pageNo: current, pageSize, ...queryParam.value, ...filterInfo.value }
    // let param = Object.assign({ column: 'createTime', order: 'desc', current, pageSize },filterObj(queryParam.value));
    list(param).then(res => {
      console.log(`🚀 -------------------------------------------------------🚀`);
      console.log(`🚀 ~ file: KcKechengbiaoList.vue:323 ~ list ~ res:`, res);
      console.log(`🚀 -------------------------------------------------------🚀`);
      dataSource.value = res?.records??[]
      pagination.total = res?.total??0
    }).finally(() => {
      // 这里是无论成功或失败都会执行的方法，在这里关闭loading
      loading.value = false;
    });
  }


  // async function loadData() {
  //   loading.value = true;
  //   // 调用查询数据接口
  //   await defHttp
  //     .get({
  //       // 请求地址
  //       url: Api.getData,
  //       // 封装查询条件
  //       params: {
  //         pageNo: pagination.current,
  //         pageSize: pagination.pageSize,
  //       },
  //     })
  //     .then((result) => {
  //       // 后台查询回来的 total，数据总数量
  //       pagination.total = result.total;
  //       // 将查询的数据赋值给 dataSource
  //       dataSource.value = result.records;
  //       // 重置选择
  //       selectedRows.value = [];
  //     })
  //     .finally(() => {
  //       // 这里是无论成功或失败都会执行的方法，在这里关闭loading
  //       loading.value = false;
  //     });
  // }


  const queryParam = ref<any>({ });
  const filterInfo = ref<any>({ xnxq: '2022-2023-2' });
  //kkdwid, week, hh, kcbh
  const toggleSearchStatus = ref<boolean>(false);
  const registerModal = ref();

  //注册table数据
  // const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  //   tableProps: {
  //     title: '课程管理-主表',
  //     api: list,
  //     columns,
  //     canResize:false,
  //     useSearchForm: false,
  //     showIndexColumn: true,
  //     showActionColumn: false,
  //     clickToRowSelect: true,
  //     rowSelection: {
  //       type: 'radio'
  //     },
  //     pagination: {
  //       pageSize: 5
  //     },
  //     actionColumn: {
  //       width: 120,
  //       fixed: 'right',
  //     },
  //     beforeFetch: (params) => {
  //       params.column = '',params.order = '';//新生成的默认不带排序
  //       return Object.assign(params, { ...queryParam.value, ...filterInfo.value});
  //     },
  //   },
  //   exportConfig: {
  //     name: "课程管理-主表",
  //     url: getExportUrl,
  //   },
	// importConfig: {
	//   url: getImportUrl,
	//   success: handleSuccess
	// },
  // });
  // const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
  const labelCol = reactive({
    xs: { span: 24 },
    sm: { span: 7 },
  });
  const wrapperCol = reactive({
    xs: { span: 24 },
    sm: { span: 16 },
  });

  const { createMessage } = useMessage();

  /**
   * 新增事件
   */
  function handleAdd() {
    registerModal.value.disableSubmit = false;
    registerModal.value.add();
  }

  /**
   * 编辑事件
   */
  function handleEdit() {
    let record = selectedRows.value[0];
    if(!record){
      createMessage.error('请您至少选择一条记录进行操作。');
      return;
    }
    registerModal.value.disableSubmit = false;
    registerModal.value.edit(record);
  }

  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    registerModal.value.disableSubmit = true;
    registerModal.value.edit(record);
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }

  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    let record = selectedRows.value[0];
    if(!record){
      createMessage.error('请您至少选择一条记录进行操作。');
      return;
    }
    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
  }

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

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
      },
    ];
  }

  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    return [
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      }, {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
        }
      }
    ]
  }

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

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


  function handleEditEnd({ record, index, key, value }: Recordable) {
    console.log(record, index, key, value);
    return false;
  }

  // 模拟将指定数据保存
  function saveByCell({ value, key, id }) {
    createMessage.loading({
      content: `正在保存!`,
      key: '_save_fake_data',
      duration: 0,
    });
    const params = {
      id,
    };
    params[key] = value;
    return new Promise((resolve) => {
      saveOrUpdate(params ,true).then(res => {
        if (res.success) {
          createMessage.success({
            content: `记录已保存`,
            key: '_save_fake_data',
            duration: 2,
          });
          resolve(true);
        } else {
          createMessage.error({
            content: `保存失败：${res.message}`,
            key: '_save_fake_data',
            duration: 2,
          });
          resolve(false);
        }
      });
    });
  }

  async function beforeEditSubmit({ record, index, key, value }) {
    console.log('单元格数据正在准备提交', { record, index, key, value });
    return await saveByCell({ id: record.id, key, value });
  }

  function handleEditCancel() {
    console.log('cancel');
  }


  // function handleEditEnd({ record, index, key, value }: Recordable) {
  //   console.log(record, index, key, value);
  //   return false;
  // }

  // async function beforeEditSubmit({ record, index, key, value }) {
  //   console.log('编辑后回调', record, index, key, value );
  //   createMessage.loading({
  //     content: `正在模拟保存${key}`,
  //     key: '_save_fake_data',
  //     duration: 0,
  //   });
  //   return await new Promise((resolve) => {
  //     setTimeout(() => {
  //       if (value === '') {
  //         createMessage.error({
  //           content: '保存失败：不能为空',
  //           key: '_save_fake_data',
  //           duration: 2,
  //         });
  //         resolve(false);
  //       } else {
  //         createMessage.success({
  //           content: `记录的${key}已保存`,
  //           key: '_save_fake_data',
  //           duration: 2,
  //         });
  //         resolve(true);
  //       }
  //     }, 2000);
  //   });
  // }

  // function handleEditCancel() {
  //   console.log('cancel');
  // }





</script>

<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }
    .query-group-cust{
      width: calc(50% - 15px);
      min-width: 100px !important;
    }
    .query-group-split-cust{
      width: 30px;
      display: inline-block;
      text-align: center
    }
  }
  .pl1r {
    margin-left: 1rem;
  }
</style>