updates

src/views/yx/yxHistoryScoreControlLine/YxHistoryScoreControlLine.api.ts

@@ -0,0 +1,64 @@
+import {defHttp} from '/@/utils/http/axios';
+import { useMessage } from "/@/hooks/web/useMessage";
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/yx/yxHistoryScoreControlLine/list',
+  save='/yx/yxHistoryScoreControlLine/add',
+  edit='/yx/yxHistoryScoreControlLine/edit',
+  deleteOne = '/yx/yxHistoryScoreControlLine/delete',
+  deleteBatch = '/yx/yxHistoryScoreControlLine/deleteBatch',
+  importExcel = '/yx/yxHistoryScoreControlLine/importExcel',
+  exportXls = '/yx/yxHistoryScoreControlLine/exportXls',
+}
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) =>
+  defHttp.get({url: Api.list, params});
+
+/**
+ * 删除单个
+ */
+export const deleteOne = (params,handleSuccess) => {
+  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+    handleSuccess();
+  });
+}
+/**
+ * 批量删除
+ * @param params
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
+        handleSuccess();
+      });
+    }
+  });
+}
+/**
+ * 保存或者更新
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({url: url, params});
+}

src/views/yx/yxHistoryScoreControlLine/YxHistoryScoreControlLine.data.ts

@@ -0,0 +1,121 @@
+import {BasicColumn} from '/@/components/Table';
+import {FormSchema} from '/@/components/Table';
+import { rules} from '/@/utils/helper/validator';
+import { render } from '/@/utils/common/renderUtils';
+//列表数据
+export const columns: BasicColumn[] = [
+   {
+    title: '年份',
+    align:"center",
+    dataIndex: 'year'
+   },
+   {
+    title: '专业类别',
+    align:"center",
+    dataIndex: 'professionalCategory'
+   },
+   {
+    title: '学历层次',
+    align:"center",
+    dataIndex: 'educationalLevel'
+   },
+   {
+    title: '批次',
+    align:"center",
+    dataIndex: 'batch'
+   },
+   {
+    title: '文科/理科',
+    align:"center",
+    dataIndex: 'category'
+   },
+   {
+    title: '文化成绩分数',
+    align:"center",
+    dataIndex: 'culturalScore'
+   },
+   {
+    title: '专业成绩分数',
+    align:"center",
+    dataIndex: 'specialScore'
+   },
+   {
+    title: '文化成绩分数校考',
+    align:"center",
+    dataIndex: 'culturalScoreXk'
+   },
+   {
+    title: '专业成绩分数校考',
+    align:"center",
+    dataIndex: 'specialScoreXk'
+   },
+];
+//查询数据
+export const searchFormSchema: FormSchema[] = [
+];
+//表单数据
+export const formSchema: FormSchema[] = [
+  {
+    label: '年份',
+    field: 'year',
+    component: 'Input',
+  },
+  {
+    label: '专业类别',
+    field: 'professionalCategory',
+    component: 'Input',
+  },
+  {
+    label: '学历层次',
+    field: 'educationalLevel',
+    component: 'Input',
+  },
+  {
+    label: '批次',
+    field: 'batch',
+    component: 'Input',
+  },
+  {
+    label: '文科/理科',
+    field: 'category',
+    component: 'Input',
+  },
+  {
+    label: '文化成绩分数',
+    field: 'culturalScore',
+    component: 'InputNumber',
+  },
+  {
+    label: '专业成绩分数',
+    field: 'specialScore',
+    component: 'InputNumber',
+  },
+  {
+    label: '文化成绩分数校考',
+    field: 'culturalScoreXk',
+    component: 'InputNumber',
+  },
+  {
+    label: '专业成绩分数校考',
+    field: 'specialScoreXk',
+    component: 'InputNumber',
+  },
+	// TODO 主键隐藏字段，目前写死为ID
+	{
+	  label: '',
+	  field: 'id',
+	  component: 'Input',
+	  show: false
+	},
+];
+
+
+
+/**
+* 流程表单调用这个方法获取formSchema
+* @param param
+*/
+export function getBpmFormSchema(_formData): FormSchema[]{
+  // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
+  return formSchema;
+}

src/views/yx/yxHistoryScoreControlLine/YxHistoryScoreControlLineList.vue

@@ -0,0 +1,322 @@
+<template>
+  <a-card title="" :bordered="false">
+    <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-row>
+        <a-col :span="3">
+          <a-form-item label="年份">
+            <a-input v-model:value="queryParam.year" placeholder="请输入年份" allowClear/>
+          </a-form-item>
+        </a-col>
+        <a-col :span="3">
+          <a-form-item label="专业类别" name="professionalCategory">
+            <a-select v-model:value="queryParam.professionalCategory" show-search allow-clear placeholder="请选择专业类别">
+              <a-select-option value="">请选择</a-select-option>
+              <a-select-option value="音乐类">音乐类</a-select-option>
+              <a-select-option value="表演类">表演类</a-select-option>
+              <a-select-option value="书法类">书法类</a-select-option>
+              <a-select-option value="舞蹈类">舞蹈类</a-select-option>
+              <a-select-option value="体育类">体育类</a-select-option>
+              <a-select-option value="艺术舞蹈类">艺术舞蹈类</a-select-option>
+              <a-select-option value="国际标准舞类">国际标准舞类</a-select-option>
+              <a-select-option value="播音与主持类">播音与主持类</a-select-option>
+              <a-select-option value="美术与设计类">美术与设计类</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="3">
+          <a-form-item label="文理分科">
+            <a-select v-model:value="queryParam.category" show-search allow-clear placeholder="请选择[文科/理科]">
+              <a-select-option value="">请选择</a-select-option>
+              <a-select-option value="文科">文科</a-select-option>
+              <a-select-option value="理科">理科</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="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-col>
+      </a-row>
+    </a-form>
+    <JVxeTable
+      toolbar
+      :toolbarConfig="toolbarConfig"
+      rowNumber
+      rowSelection
+      keepSource
+      asyncRemove
+      :height="500"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="dataSource"
+      :pagination="pagination"
+      @save="handleTableSave"
+      @removed="handleTableRemove"
+      @edit-closed="handleEditClosed"
+      @pageChange="handlePageChange"
+      @selectRowChange="handleSelectRowChange"
+    />
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+// 即时保存示例
+import { reactive, ref } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { JVxeColumn, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
+import { useMessage } from '/@/hooks/web/useMessage';
+const labelCol = reactive({
+  xs: { span: 24 },
+  sm: { span: 7 },
+});
+const wrapperCol = reactive({
+  xs: { span: 24 },
+  sm: { span: 16 },
+});
+const { createMessage } = useMessage();
+// 工具栏的按钮配置
+const toolbarConfig = reactive({
+  // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
+  btn: ['add', 'save', 'remove', 'clearSelection'],
+});
+// 是否正在加载
+const loading = ref(false);
+// 查询参数
+const queryParam = reactive({
+  year:'',//年份
+  category:'',//文理分科
+  professionalCategory:'',//专业类别
+})
+// 分页器参数
+const pagination = reactive({
+  // 当前页码
+  current: 1,
+  // 每页的条数
+  pageSize: 10,
+  // 可切换的条数
+  pageSizeOptions: ['10', '20', '30', '100', '200'],
+  // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
+  total: 0,
+});
+// 选择的行
+const selectedRows = ref<Recordable[]>([]);
+// 数据源，控制表格的数据
+const dataSource = ref<Recordable[]>([]);
+// 列配置，控制表格显示的列
+const columns = ref<JVxeColumn[]>([
+  /*{ key: 'num', title: '序号', width: 80, type: JVxeTypes.normal },*/
+  {
+    title: '序号',
+    key: 'id',
+    width:200,
+    type: JVxeTypes.normal,
+  },
+  {
+    title: '年份',
+    key: 'year',
+    width:100,
+    type: JVxeTypes.input,
+  },
+  {
+    title: '专业类别',
+    key: 'professionalCategory',
+    width:200,
+    type: JVxeTypes.input,
+  },
+  {
+    title: '批次',
+    key: 'batch',
+    width:200,
+    type: JVxeTypes.input,
+  },
+  {
+    title: '文科/理科',
+    key: 'category',
+    width:150,
+    type: JVxeTypes.input,
+  },
+  {
+    title: '文化成绩分数',
+    key: 'culturalScore',
+    width:150,
+    type: JVxeTypes.inputNumber,
+  },
+  {
+    title: '专业成绩分数',
+    key: 'specialScore',
+    width:150,
+    type: JVxeTypes.inputNumber,
+  },
+  {
+    title: '文化成绩分数校考',
+    key: 'culturalScoreXk',
+    width:150,
+    type: JVxeTypes.inputNumber,
+  },
+  {
+    title: '专业成绩分数校考',
+    key: 'specialScoreXk',
+    width:150,
+    type: JVxeTypes.inputNumber
+  }
+]);
+
+// 查询url地址
+enum Api {
+  getData = '/yx/yxHistoryScoreControlLine/list',
+  // 模拟保存单行数据（即时保存）
+  saveRow = '/yx/yxHistoryScoreControlLine/edit',
+  // 模拟保存整个表格的数据
+  saveAll = '/yx/yxHistoryScoreControlLine/saveAll',
+  deleteBatch = '/yx/yxHistoryScoreControlLine/deleteBatch',
+}
+
+loadData();
+
+async function searchQuery(){
+  pagination.current = 1
+  loadData()
+}
+async function searchReset(){
+  pagination.current = 1
+  queryParam.year = ''
+  queryParam.category = ''
+  queryParam.professionalCategory = ''
+  loadData()
+}
+
+// 加载数据
+async function loadData() {
+  loading.value = true;
+  // 调用查询数据接口
+  await defHttp
+    .get({
+      // 请求地址
+      url: Api.getData,
+      // 封装查询条件
+      params: {
+        year:queryParam.year,
+        category:queryParam.category,
+        professionalCategory:queryParam.professionalCategory,
+        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;
+    });
+}
+
+// 【整体保存】点击保存按钮时触发的事件
+function handleTableSave({ $table, target }) {
+  // 校验整个表格
+  $table.validate().then((errMap) => {
+    // 校验通过
+    if (!errMap) {
+      // 获取所有数据
+      let tableData = target.getTableData();
+      console.log('当前保存的数据是：', tableData);
+      // 获取新增的数据
+      let newData = target.getNewData();
+      console.log('-- 新增的数据：', newData);
+      // 获取删除的数据
+      let deleteData = target.getDeleteData();
+      console.log('-- 删除的数据：', deleteData);
+      // 【模拟保存】
+      loading.value = true;
+      defHttp
+        .post({
+          url: Api.saveAll,
+          params: tableData,
+        })
+        .then(() => {
+          createMessage.success(`保存成功！`);
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    }
+  });
+}
+
+// 触发单元格删除事件
+function handleTableRemove(event) {
+  // 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
+  console.log('待删除的数据: ', event.deleteRows);
+  // 也可以只传ID，因为可以根据ID删除
+  let deleteIds = event.deleteRows.map((row) => row.id);
+  console.log('待删除的数据ids: ', deleteIds);
+  // 模拟请求后台删除
+  loading.value = true;
+  window.setTimeout(() => {
+    defHttp
+      .delete({
+        url: Api.deleteBatch,data:{ids:deleteIds.join(',')}
+      },{joinParamsToUrl: true})
+      .then((res) => {
+        createMessage.success('删除成功');
+        //// 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
+        event.confirmRemove();
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }, 1000);
+}
+
+// 单元格编辑完成之后触发的事件
+function handleEditClosed(event) {
+  let { $table, row, column } = event;
+  let field = column.property;
+  // 判断单元格值是否被修改
+  if ($table.isUpdateByRow(row, field)) {
+    // 校验当前行
+    $table.validate(row).then((errMap) => {
+      // 校验通过
+      if (!errMap) {
+        // 【模拟保存】
+        let hideLoading = createMessage.loading(`正在保存"${column.title}"`, 0);
+        console.log('即时保存数据：', row);
+        defHttp
+          .put({
+            url: Api.saveRow,
+            params: row,
+          })
+          .then((res) => {
+            createMessage.success(`"${column.title}"保存成功！`);
+            // 局部更新单元格为已保存状态
+            $table.reloadRow(row, null, field);
+          })
+          .finally(() => {
+            hideLoading();
+          });
+      }
+    });
+  }
+}
+
+// 当分页参数变化时触发的事件
+function handlePageChange(event) {
+  // 重新赋值
+  pagination.current = event.current;
+  pagination.pageSize = event.pageSize;
+  // 查询数据
+  loadData();
+}
+
+// 当选择的行变化时触发的事件
+function handleSelectRowChange(event) {
+  selectedRows.value = event.selectedRows;
+}
+</script>
+
+<style scoped></style>

src/views/yx/yxHistoryScoreControlLine/components/YxHistoryScoreControlLineForm.vue

@@ -0,0 +1,70 @@
+<template>
+    <div style="min-height: 400px">
+        <BasicForm @register="registerForm"></BasicForm>
+        <div style="width: 100%;text-align: center" v-if="!formDisabled">
+            <a-button @click="submitForm" pre-icon="ant-design:check" type="primary">提 交</a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {BasicForm, useForm} from '/@/components/Form/index';
+    import {computed, defineComponent} from 'vue';
+    import {defHttp} from '/@/utils/http/axios';
+    import { propTypes } from '/@/utils/propTypes';
+    import {getBpmFormSchema} from '../YxHistoryScoreControlLine.data';
+    import {saveOrUpdate} from '../YxHistoryScoreControlLine.api';
+    
+    export default defineComponent({
+        name: "YxHistoryScoreControlLineForm",
+        components:{
+            BasicForm
+        },
+        props:{
+            formData: propTypes.object.def({}),
+            formBpm: propTypes.bool.def(true),
+        },
+        setup(props){
+            const [registerForm, { setFieldsValue, setProps, getFieldsValue }] = useForm({
+                labelWidth: 150,
+                schemas: getBpmFormSchema(props.formData),
+                showActionButtonGroup: false,
+                baseColProps: {span: 24}
+            });
+
+            const formDisabled = computed(()=>{
+                if(props.formData.disabled === false){
+                    return false;
+                }
+                return true;
+            });
+
+            let formData = {};
+            const queryByIdUrl = '/yx/yxHistoryScoreControlLine/queryById';
+            async function initFormData(){
+                let params = {id: props.formData.dataId};
+                const data = await defHttp.get({url: queryByIdUrl, params});
+                formData = {...data}
+                //设置表单的值
+                await setFieldsValue(formData);
+                //默认是禁用
+                await setProps({disabled: formDisabled.value})
+            }
+
+            async function submitForm() {
+                let data = getFieldsValue();
+                let params = Object.assign({}, formData, data);
+                console.log('表单数据', params)
+                await saveOrUpdate(params, true)
+            }
+
+            initFormData();
+            
+            return {
+                registerForm,
+                formDisabled,
+                submitForm,
+            }
+        }
+    });
+</script>

src/views/yx/yxHistoryScoreControlLine/components/YxHistoryScoreControlLineModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
+      <BasicForm @register="registerForm"/>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+    import {ref, computed, unref} from 'vue';
+    import {BasicModal, useModalInner} from '/@/components/Modal';
+    import {BasicForm, useForm} from '/@/components/Form/index';
+    import {formSchema} from '../YxHistoryScoreControlLine.data';
+    import {saveOrUpdate} from '../YxHistoryScoreControlLine.api';
+    // Emits声明
+    const emit = defineEmits(['register','success']);
+    const isUpdate = ref(true);
+    //表单配置
+    const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
+        //labelWidth: 150,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+        baseColProps: {span: 24}
+    });
+    //表单赋值
+    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+        //重置表单
+        await resetFields();
+        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
+        isUpdate.value = !!data?.isUpdate;
+        if (unref(isUpdate)) {
+            //表单赋值
+            await setFieldsValue({
+                ...data.record,
+            });
+        }
+        // 隐藏底部时禁用整个表单
+       setProps({ disabled: !data?.showFooter })
+    });
+    //设置标题
+    const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
+    //表单提交事件
+    async function handleSubmit(v) {
+        try {
+            let values = await validate();
+            setModalProps({confirmLoading: true});
+            //提交表单
+            await saveOrUpdate(values, isUpdate.value);
+            //关闭弹窗
+            closeModal();
+            //刷新列表
+            emit('success');
+        } finally {
+            setModalProps({confirmLoading: false});
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+	/** 时间和数字输入框样式 */
+  :deep(.ant-input-number){
+		width: 100%
+	}
+
+	:deep(.ant-calendar-picker){
+		width: 100%
+	}
+</style>

src/views/yx/yxOrder/YxOrder.data.ts

@@ -1,43 +1,77 @@
 import {BasicColumn} from '/@/components/Table';
 import {FormSchema} from '/@/components/Table';
-import { rules} from '/@/utils/helper/validator';
+import {rules} from '/@/utils/helper/validator';
-import { render } from '/@/utils/common/renderUtils';
+import {render} from '/@/utils/common/renderUtils';
 //列表数据
 export const columns: BasicColumn[] = [
-   {
+  {
     title: '订单编号（流水号）',
-    align:"center",
+    align: "center",
-    dataIndex: 'orderCode'
+    dataIndex: 'orderCode',
-   },
+    width: 300,
-   {
+  },
+  {
     title: '总金额',
-    align:"center",
+    align: "center",
-    dataIndex: 'totalAmount'
+    dataIndex: 'totalAmount',
-   },
+    customRender: ({text}) => {
-   {
+      if(text){
+        return parseFloat(text)/100
+      }
+      return '未知';
+    },
+  },
+  {
     title: '商品编号',
-    align:"center",
+    align: "center",
-    dataIndex: 'skuCode'
+    dataIndex: 'skuCode',
-   },
+    customRender: ({text}) => {
-   {
+      if (text === '1001') {
-    title: '支付方式：1借记卡、2信用卡、3微信、4支付宝、5现金',
+        return '体验卡';
-    align:"center",
+      }else if(text ==='1002'){
-    dataIndex: 'paymentType'
+        return 'VIP';
-   },
+      }else if(text ==='9999'){
-   {
+        return '管理员';
-    title: '订单状态：1未付款、2已付款、3已发货、4已签收',
+      }else{
-    align:"center",
+        return '未知';
-    dataIndex: 'orderStatus'
+      }
-   },
+    },
-   {
+  },
-    title: '购买用户id',
+  {
-    align:"center",
+    title: '支付方式',
-    dataIndex: 'paymentUserId'
+    //1借记卡、2信用卡、3微信、4支付宝、5现金
-   },
+    align: "center",
+    dataIndex: 'paymentType',
+  },
+  {
+    title: '订单状态',//1未付款、2已付款、3已发货、4已签收
+    align: "center",
+    dataIndex: 'orderStatus',
+  },
+  {
+    title: '购买人手机号',
+    align: "center",
+    dataIndex: 'paymentUserId_dictText',//paymentUserId
+  },{
+    title: '下单时间',
+    align: "center",
+    dataIndex: 'createTime',//paymentUserId
+    resizable: true,
+    sorter: {
+      multiple: 2
+    }
+  },{
+    title: '支付时间',
+    align: "center",
+    dataIndex: 'paymentTime',//paymentUserId
+    resizable: true,
+    sorter: {
+      multiple: 2
+    }
+  },
 ];
 //查询数据
-export const searchFormSchema: FormSchema[] = [
+export const searchFormSchema: FormSchema[] = [];
-];
 //表单数据
 export const formSchema: FormSchema[] = [
   {
@@ -70,22 +104,21 @@ export const formSchema: FormSchema[] = [
     field: 'paymentUserId',
     component: 'Input',
   },
-	// TODO 主键隐藏字段，目前写死为ID
+  // TODO 主键隐藏字段，目前写死为ID
-	{
+  {
-	  label: '',
+    label: '',
-	  field: 'id',
+    field: 'id',
-	  component: 'Input',
+    component: 'Input',
-	  show: false
+    show: false
-	},
+  },
 ];
 
 
-
 /**
-* 流程表单调用这个方法获取formSchema
+ * 流程表单调用这个方法获取formSchema
-* @param param
+ * @param param
-*/
+ */
-export function getBpmFormSchema(_formData): FormSchema[]{
+export function getBpmFormSchema(_formData): FormSchema[] {
   // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
   return formSchema;
-}
+}

src/views/yx/yxOrder/YxOrderList.vue

@@ -1,41 +1,103 @@
 <template>
   <div>
+    <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam"
+              :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-row>
+          <a-col :span="6">
+            <a-form-item label="订单编号">
+              <a-input v-model:value="queryParam.orderCode" placeholder="请输入订单编号"
+                       allowClear="true"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item label="商品类型" name="skuCode">
+              <a-select v-model:value="queryParam.skuCode" show-search allow-clear
+                        placeholder="请选择">
+                <a-select-option value="">请选择</a-select-option>
+                <a-select-option value="1001">体验卡</a-select-option>
+                <a-select-option value="1002">VIP</a-select-option>
+                <a-select-option value="9999">管理员</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item label="订单状态" name="orderStatus">
+              <a-select v-model:value="queryParam.orderStatus" show-search allow-clear
+                        placeholder="请选择">
+                <a-select-option value="">请选择</a-select-option>
+                <a-select-option value="1">{{getStatusText("1")}}</a-select-option>
+                <a-select-option value="2">{{getStatusText("2")}}</a-select-option>
+                <a-select-option value="-1">{{getStatusText("-1")}}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <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-col>
+        </a-row>
+      </a-form>
+    </div>
     <!--引用表格-->
-   <BasicTable @register="registerTable" :rowSelection="rowSelection">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
-     <!--插槽:table标题-->
+      <!--插槽:table标题-->
-      <template #tableTitle>
+      <template v-if="false" #tableTitle>
-          <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
+<!--        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-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>-->
-          <j-upload-button  type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
-          <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-dropdown v-if="selectedRowKeys.length > 0">
-              <template #overlay>
+          <template #overlay>
-                <a-menu>
+            <a-menu>
-                  <a-menu-item key="1" @click="batchHandleDelete">
+              <a-menu-item key="1" @click="batchHandleDelete">
-                    <Icon icon="ant-design:delete-outlined"></Icon>
+                <Icon icon="ant-design:delete-outlined"></Icon>
-                    删除
+                删除
-                  </a-menu-item>
+              </a-menu-item>
-                </a-menu>
+            </a-menu>
-              </template>
+          </template>
-              <a-button>批量操作
+          <a-button>批量操作
-                <Icon icon="mdi:chevron-down"></Icon>
+            <Icon icon="mdi:chevron-down"></Icon>
-              </a-button>
+          </a-button>
         </a-dropdown>
       </template>
-       <!--操作栏-->
+      <template #bodyCell="{ column, record }">
+        <a-tag v-if="column.key === 'paymentType' && record.paymentType==='3'" color="success">
+          <template #icon>
+            <wechat-outlined/>
+          </template>
+          微信支付
+        </a-tag>
+        <!--        <AlipayCircleOutlined />-->
+
+        <Tag v-if="column.key === 'orderStatus'" :color="getStatusColor(record.orderStatus)">
+          {{ getStatusText(record.orderStatus) }}
+        </Tag>
+
+      </template>
+      <!--      <template #category="{ record }">
+              <Tag color="green">
+                {{ record.orderStatus }}
+              </Tag>
+            </template>-->
+      <!--操作栏-->
       <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
+        <TableAction :actions="getTableAction(record)"
+                     :dropDownActions="getDropDownAction(record)"/>
       </template>
       <!--字段回显插槽-->
       <template #htmlSlot="{text}">
-         <div v-html="text"></div>
+        <div v-html="text"></div>
       </template>
       <!--省市区字段回显插槽-->
       <template #pcaSlot="{text}">
-         {{ getAreaTextByCode(text) }}
+        {{ getAreaTextByCode(text) }}
       </template>
       <template #fileSlot="{text}">
-         <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+        <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
-         <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
+        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined"
+                  size="small" @click="downloadFile(text)">下载
+        </a-button>
       </template>
     </BasicTable>
     <!-- 表单区域 -->
@@ -44,130 +106,196 @@
 </template>
 
 <script lang="ts" name="yx-yxOrder" setup>
-  import {ref, computed, unref} from 'vue';
+import {ref, computed, unref, reactive} from 'vue';
-  import {BasicTable, useTable, TableAction} from '/@/components/Table';
+import {
-  import {useModal} from '/@/components/Modal';
+  WechatOutlined,
-  import { useListPage } from '/@/hooks/system/useListPage'
+} from '@ant-design/icons-vue';
-  import YxOrderModal from './components/YxOrderModal.vue'
+import {Tag, Avatar} from 'ant-design-vue';
-  import {columns, searchFormSchema} from './YxOrder.data';
+import {BasicTable, useTable, TableAction} from '/@/components/Table';
-  import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './YxOrder.api';
+import {useModal} from '/@/components/Modal';
-  import { downloadFile } from '/@/utils/common/renderUtils';
+import {useListPage} from '/@/hooks/system/useListPage'
-  const checkedKeys = ref<Array<string | number>>([]);
+import YxOrderModal from './components/YxOrderModal.vue'
-  //注册model
+import {columns, searchFormSchema} from './YxOrder.data';
-  const [registerModal, {openModal}] = useModal();
+import {list, deleteOne, batchDelete, getImportUrl, getExportUrl} from './YxOrder.api';
-  //注册table数据
+import {downloadFile} from '/@/utils/common/renderUtils';
-  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
-      tableProps:{
-           title: '订单表',
-           api: list,
-           columns,
-           canResize:false,
-           formConfig: {
-              //labelWidth: 120,
-              schemas: searchFormSchema,
-              autoSubmitOnEnter:true,
-              showAdvancedButton:true,
-              fieldMapToNumber: [
-              ],
-              fieldMapToTime: [
-              ],
-            },
-           actionColumn: {
-               width: 120,
-               fixed:'right'
-            },
-      },
-       exportConfig: {
-            name:"订单表",
-            url: getExportUrl,
-          },
-          importConfig: {
-            url: getImportUrl,
-            success: handleSuccess
-          },
-  })
 
-  const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
+const checkedKeys = ref<Array<string | number>>([]);
+const queryParam = reactive<any>({});
+//注册model
+const [registerModal, {openModal}] = useModal();
+const labelCol = reactive({
+  xs: {span: 24},
+  sm: {span: 7},
+});
+const wrapperCol = reactive({
+  xs: {span: 24},
+  sm: {span: 16},
+});
+//注册table数据
+const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
+  tableProps: {
+    api: list,
+    columns,
+    canResize: false,
+    useSearchForm: false,
+    formConfig: {
+      //labelWidth: 120,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+      showAdvancedButton: true,
+      fieldMapToNumber: [],
+      fieldMapToTime: [],
+    },
+    beforeFetch: (params) => {
+      return Object.assign(params, queryParam);
+    },
+    bordered: true,
+    showTableSetting: false,
+    showActionColumn: false,//是否显示操作
+    /*actionColumn: {
+      width: 120,
+      fixed: 'right'
+    },*/
+  },
+  exportConfig: {
+    name: "订单表",
+    url: getExportUrl,
+  },
+  importConfig: {
+    url: getImportUrl,
+    success: handleSuccess
+  },
+})
 
-   /**
+const [registerTable, {reload}, {rowSelection, selectedRowKeys}] = tableContext
-    * 新增事件
+
-    */
+/**
-  function handleAdd() {
+ * 新增事件
-     openModal(true, {
+ */
-       isUpdate: false,
+function handleAdd() {
-       showFooter: true,
+  openModal(true, {
-     });
+    isUpdate: false,
+    showFooter: true,
+  });
+}
+
+/**
+ * 编辑事件
+ */
+function handleEdit(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+    showFooter: true,
+  });
+}
+
+/**
+ * 详情
+ */
+function handleDetail(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+    showFooter: false,
+  });
+}
+
+/**
+ * 删除事件
+ */
+async function handleDelete(record) {
+  await deleteOne({id: record.id}, handleSuccess);
+}
+
+/**
+ * 批量删除事件
+ */
+async function batchHandleDelete() {
+  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 getStatusColor(orderStatus) {
+  if (orderStatus === '2') {
+    return 'success'
   }
-   /**
+  return 'default'
-    * 编辑事件
+}
-    */
-  function handleEdit(record: Recordable) {
-     openModal(true, {
-       record,
-       isUpdate: true,
-       showFooter: true,
-     });
-   }
-   /**
-    * 详情
-   */
-  function handleDetail(record: Recordable) {
-     openModal(true, {
-       record,
-       isUpdate: true,
-       showFooter: false,
-     });
-   }
-   /**
-    * 删除事件
-    */
-  async function handleDelete(record) {
-     await deleteOne({id: record.id}, handleSuccess);
-   }
-   /**
-    * 批量删除事件
-    */
-  async function batchHandleDelete() {
-     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 getStatusText(orderStatus) {
+  if (orderStatus === '1') {
+    return '未付款';
+  } else if (orderStatus === '2') {
+    return '已付款';
+  } else {
+    return '未知';
+  }
+}
+
+/**
+ * 查询
+ */
+function searchQuery() {
+  /*if (queryParam.title) {
+    queryParam.title = '*'+queryParam.title+'*'
+  }*/
+  reload();
+}
+
+/**
+ * 重置
+ */
+function searchReset() {
+  queryParam.orderCode=''
+  queryParam.skuCode=''
+  queryParam.orderStatus=''
+  selectedRowKeys.value = [];
+  //刷新数据
+  reload();
+}
 
 </script>
 
 <style scoped>
 
-</style>
+</style>

src/views/yx/yxVipCard/YxVipCard.data.ts

@@ -1,48 +1,60 @@
 import {BasicColumn} from '/@/components/Table';
 import {FormSchema} from '/@/components/Table';
-import { rules} from '/@/utils/helper/validator';
+import {rules} from '/@/utils/helper/validator';
-import { render } from '/@/utils/common/renderUtils';
+import {render} from '/@/utils/common/renderUtils';
 //列表数据
 export const columns: BasicColumn[] = [
-   {
+  {
     title: '卡号',
-    align:"center",
+    align: "center",
     dataIndex: 'cardNum'
-   },
+  },
   {
     title: '有效时长(天)',
     dataIndex: 'validTime',
     align: 'center',
   },
-   /*{
+  {
-    title: '有效日期',
+    title: '有效日期至',
-    align:"center",
+    align: "center",
-    dataIndex: 'validDate',
+    dataIndex: 'validDate'
-    customRender:({text}) =>{
+  },
-      return !text?"":(text.length>10?text.substr(0,10):text)
+  /*{
-    },
+   title: '有效日期',
-   },*/
+   align:"center",
-    {
+   dataIndex: 'validDate',
-      title: '对应商品',
+   customRender:({text}) =>{
-      align:"center",
+     return !text?"":(text.length>10?text.substr(0,10):text)
-      dataIndex: 'skuCode_dictText'
-    },
-   {
-    title: '兑换用户id',
-    align:"center",
-    dataIndex: 'userId'
    },
+  },*/
+  {
+    title: '对应商品',
+    align: "center",
+    dataIndex: 'skuCode_dictText'
+  },
+  {
+    title: '使用日期',
+    align: "center",
+    dataIndex: 'usedTime',
+    sorter: {
+      multiple: 2
+    }
+  },
+  {
+    title: '兑换用户手机号',
+    align: "center",
+    dataIndex: 'userId_dictText',//userId
+  },
 ];
 //查询数据
-export const searchFormSchema: FormSchema[] = [
+export const searchFormSchema: FormSchema[] = [];
-];
 //表单数据
 export const formSchema: FormSchema[] = [
   {
     label: '卡号',
     field: 'cardNum',
     component: 'Input',
-    componentProps:{
+    componentProps: {
       disabled: true
     },
   },
@@ -59,13 +71,13 @@ export const formSchema: FormSchema[] = [
   {
     label: '对应商品',
     field: 'skuCode',
-    colProps: { sm: 24 },
+    colProps: {sm: 24},
     component: 'JSearchSelect',
     componentProps: {
       dict: 'yx_vip_sku,sku_name,sku_code',
     },
     dynamicRules: () => {
-      return [{ required: true, message: '请选择对应商品!' }];
+      return [{required: true, message: '请选择对应商品!'}];
     }
   },
   /*{
@@ -73,22 +85,21 @@ export const formSchema: FormSchema[] = [
     field: 'userId',
     component: 'Input',
   },*/
-	// TODO 主键隐藏字段，目前写死为ID
+  // TODO 主键隐藏字段，目前写死为ID
-	{
+  {
-	  label: '',
+    label: '',
-	  field: 'id',
+    field: 'id',
-	  component: 'Input',
+    component: 'Input',
-	  show: false
+    show: false
-	},
+  },
 ];
 
 
-
 /**
-* 流程表单调用这个方法获取formSchema
+ * 流程表单调用这个方法获取formSchema
-* @param param
+ * @param param
-*/
+ */
-export function getBpmFormSchema(_formData): FormSchema[]{
+export function getBpmFormSchema(_formData): FormSchema[] {
   // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
   return formSchema;
 }

src/views/yx/yxVipCard/YxVipCardList-qq.vue

@@ -0,0 +1,280 @@
+<template>
+  <a-card title="" :bordered="false">
+    <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-row>
+        <a-col :span="6">
+          <a-form-item label="年份">
+            <a-input v-model:value="queryParam.year" placeholder="请输入年份" allowClear/>
+          </a-form-item>
+        </a-col>
+        <a-col :span="6">
+          <a-form-item label="专业类别" name="professionalCategory">
+            <a-select v-model:value="queryParam.professionalCategory" show-search allow-clear placeholder="请选择专业类别">
+              <a-select-option value="">请选择</a-select-option>
+              <a-select-option value="音乐类">音乐类</a-select-option>
+              <a-select-option value="国际标准舞类">国际标准舞类</a-select-option>
+              <a-select-option value="播音与主持类">播音与主持类</a-select-option>
+              <a-select-option value="表演类">表演类</a-select-option>
+              <a-select-option value="编导制作类">编导制作类</a-select-option>
+              <a-select-option value="书法类">书法类</a-select-option>
+              <a-select-option value="艺术舞蹈类">艺术舞蹈类</a-select-option>
+              <a-select-option value="美术与设计类">美术与设计类</a-select-option>
+              <a-select-option value="舞蹈类">舞蹈类</a-select-option>
+              <a-select-option value="体育类">体育类</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="6">
+          <a-form-item label="文理分科">
+            <a-select v-model:value="queryParam.category" show-search allow-clear placeholder="请选择[文科/理科]">
+              <a-select-option value="">请选择</a-select-option>
+              <a-select-option value="文科">文科</a-select-option>
+              <a-select-option value="理科">理科</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="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-col>
+      </a-row>
+    </a-form>
+    <JVxeTable
+      toolbar
+      :toolbarConfig="toolbarConfig"
+      rowNumber
+      rowSelection
+      keepSource
+      asyncRemove
+      :height="500"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="dataSource"
+      :pagination="pagination"
+      @save="handleTableSave"
+      @removed="handleTableRemove"
+      @edit-closed="handleEditClosed"
+      @pageChange="handlePageChange"
+      @selectRowChange="handleSelectRowChange"
+    />
+  </a-card>
+  <YxVipCardModal @register="registerModal" @success="handleSuccess"></YxVipCardModal>
+</template>
+
+<script lang="ts" setup>
+// 即时保存示例
+import { reactive, ref } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import {useModal} from '/@/components/Modal';
+import { JVxeColumn, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
+import { useMessage } from '/@/hooks/web/useMessage';
+import YxVipCardModal from "@/views/yx/yxVipCard/components/YxVipCardModal.vue";
+//注册model
+const [registerModal, {openModal}] = useModal();
+const labelCol = reactive({
+  xs: { span: 24 },
+  sm: { span: 7 },
+});
+const wrapperCol = reactive({
+  xs: { span: 24 },
+  sm: { span: 16 },
+});
+const { createMessage } = useMessage();
+// 工具栏的按钮配置
+const toolbarConfig = reactive({
+  // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
+  btn: ['add', 'save', 'remove', 'clearSelection'],
+});
+// 是否正在加载
+const loading = ref(false);
+// 查询参数
+const queryParam = reactive({
+  year:'',//年份
+  category:'',//文理分科
+  professionalCategory:'',//专业类别
+})
+// 分页器参数
+const pagination = reactive({
+  // 当前页码
+  current: 1,
+  // 每页的条数
+  pageSize: 10,
+  // 可切换的条数
+  pageSizeOptions: ['10', '20', '30', '100', '200'],
+  // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
+  total: 0,
+});
+// 选择的行
+const selectedRows = ref<Recordable[]>([]);
+// 数据源，控制表格的数据
+const dataSource = ref<Recordable[]>([]);
+// 列配置，控制表格显示的列
+const columns = ref<JVxeColumn[]>([
+  /*{ key: 'num', title: '序号', width: 80, type: JVxeTypes.normal },*/
+  {
+    title: '卡号',
+    key: 'cardNum',
+    width:200,
+    type: JVxeTypes.input,
+  },
+  {
+    title: '有效时长(天)',
+    key: 'validTime',
+    width:150,
+    type: JVxeTypes.inputNumber,
+  }
+]);
+
+// 查询url地址
+enum Api {
+  getData = '/yx/yxVipCard/list',
+  // 模拟保存单行数据（即时保存）
+  saveRow = '/yx/yxVipCard/edit',
+  // 模拟保存整个表格的数据
+  saveAll = '/yx/yxVipCard/saveAll',
+  deleteBatch = '/yx/yxVipCard/deleteBatch',
+}
+
+loadData();
+
+async function searchQuery(){
+  pagination.current = 1
+  loadData()
+}
+async function searchReset(){
+  pagination.current = 1
+  loadData()
+}
+
+// 加载数据
+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;
+    });
+}
+
+// 【整体保存】点击保存按钮时触发的事件
+function handleTableSave({ $table, target }) {
+  // 校验整个表格
+  $table.validate().then((errMap) => {
+    // 校验通过
+    if (!errMap) {
+      // 获取所有数据
+      let tableData = target.getTableData();
+      console.log('当前保存的数据是：', tableData);
+      // 获取新增的数据
+      let newData = target.getNewData();
+      console.log('-- 新增的数据：', newData);
+      // 获取删除的数据
+      let deleteData = target.getDeleteData();
+      console.log('-- 删除的数据：', deleteData);
+      // 【模拟保存】
+      loading.value = true;
+      defHttp
+        .post({
+          url: Api.saveAll,
+          params: tableData,
+        })
+        .then(() => {
+          createMessage.success(`保存成功！`);
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    }
+  });
+}
+
+// 触发单元格删除事件
+function handleTableRemove(event) {
+  // 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
+  console.log('待删除的数据: ', event.deleteRows);
+  // 也可以只传ID，因为可以根据ID删除
+  let deleteIds = event.deleteRows.map((row) => row.id);
+  console.log('待删除的数据ids: ', deleteIds);
+  // 模拟请求后台删除
+  loading.value = true;
+  window.setTimeout(() => {
+    defHttp
+      .delete({
+        url: Api.deleteBatch,data:{ids:deleteIds.join(',')}
+      },{joinParamsToUrl: true})
+      .then((res) => {
+        createMessage.success('删除成功');
+        //// 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
+        event.confirmRemove();
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }, 1000);
+}
+
+// 单元格编辑完成之后触发的事件
+function handleEditClosed(event) {
+  let { $table, row, column } = event;
+  let field = column.property;
+  // 判断单元格值是否被修改
+  if ($table.isUpdateByRow(row, field)) {
+    // 校验当前行
+    $table.validate(row).then((errMap) => {
+      // 校验通过
+      if (!errMap) {
+        // 【模拟保存】
+        let hideLoading = createMessage.loading(`正在保存"${column.title}"`, 0);
+        console.log('即时保存数据：', row);
+        defHttp
+          .put({
+            url: Api.saveRow,
+            params: row,
+          })
+          .then((res) => {
+            createMessage.success(`"${column.title}"保存成功！`);
+            // 局部更新单元格为已保存状态
+            $table.reloadRow(row, null, field);
+          })
+          .finally(() => {
+            hideLoading();
+          });
+      }
+    });
+  }
+}
+
+// 当分页参数变化时触发的事件
+function handlePageChange(event) {
+  // 重新赋值
+  pagination.current = event.current;
+  pagination.pageSize = event.pageSize;
+  // 查询数据
+  loadData();
+}
+
+// 当选择的行变化时触发的事件
+function handleSelectRowChange(event) {
+  selectedRows.value = event.selectedRows;
+}
+</script>
+
+<style scoped></style>

src/views/yx/yxVipCard/YxVipCardList.vue

@@ -1,16 +1,51 @@
 <template>
   <div>
+    <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam"
+              :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-row>
+          <a-col :span="3">
+            <a-form-item label="会员卡号">
+              <a-input v-model:value="queryParam.cardNum" placeholder="请输入会员卡号"
+                       allowClear="true"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item label="会员类型" name="skuCode">
+              <a-select v-model:value="queryParam.skuCode" show-search allow-clear
+                        placeholder="请选择">
+                <a-select-option value="">请选择</a-select-option>
+                <a-select-option value="1001">体验卡</a-select-option>
+                <a-select-option value="1002">VIP</a-select-option>
+                <a-select-option value="9999">管理员</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="4">
+            <a-form-item label="有效时长(天)">
+              <a-input type="number" v-model:value="queryParam.validTime" placeholder="请输入有效时长"
+                       allowClear="true"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+            <a-button preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
     <!--引用表格-->
     <BasicTable @register="registerTable" :rowSelection="rowSelection">
       <!--插槽:table标题-->
       <template #tableTitle>
-        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增
+<!--        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增
-        </a-button>
+        </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 type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">
           导入
-        </j-upload-button>
+        </j-upload-button>-->
         <a-dropdown v-if="selectedRowKeys.length > 0">
           <template #overlay>
             <a-menu>
@@ -51,7 +86,7 @@
 </template>
 
 <script lang="ts" name="yx-yxVipCard" setup>
-import {ref, computed, unref} from 'vue';
+import {ref, computed, unref,reactive} from 'vue';
 import {BasicTable, useTable, TableAction} from '/@/components/Table';
 import {useModal} from '/@/components/Modal';
 import {useListPage} from '/@/hooks/system/useListPage'
@@ -61,8 +96,18 @@ import {list, deleteOne, batchDelete, getImportUrl, getExportUrl} from './YxVipC
 import {downloadFile} from '/@/utils/common/renderUtils';
 
 const checkedKeys = ref<Array<string | number>>([]);
+const queryParam = reactive<any>({});
+const queryParam2 = reactive<any>({});
 //注册model
 const [registerModal, {openModal}] = useModal();
+const labelCol = reactive({
+  xs: {span: 24},
+  sm: {span: 7},
+});
+const wrapperCol = reactive({
+  xs: {span: 24},
+  sm: {span: 16},
+});
 //注册table数据
 const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
   tableProps: {
@@ -70,6 +115,7 @@ const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
     api: list,
     columns,
     canResize: false,
+    useSearchForm:false,
     formConfig: {
       //labelWidth: 120,
       schemas: searchFormSchema,
@@ -78,6 +124,9 @@ const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
       fieldMapToNumber: [],
       fieldMapToTime: [],
     },
+    beforeFetch: (params) => {
+      return Object.assign(params, queryParam2);
+    },
     actionColumn: {
       width: 120,
       fixed: 'right'
@@ -188,7 +237,32 @@ function getDropDownAction(record) {
   }
 }
 
+/**
+ * 查询
+ */
+function searchQuery() {
+  if (queryParam.cardNum) {
+    queryParam2.cardNum = '*'+queryParam.cardNum+'*'
+  }
+  queryParam2.skuCode = queryParam.skuCode
+  queryParam2.validTime = queryParam.validTime
+  reload();
+}
 
+/**
+ * 重置
+ */
+function searchReset() {
+  queryParam.cardNum=''
+  queryParam2.cardNum=''
+  queryParam.skuCode=''
+  queryParam2.skuCode=''
+  queryParam.validTime=''
+  queryParam2.validTime=''
+  selectedRowKeys.value = [];
+  //刷新数据
+  reload();
+}
 </script>
 
 <style scoped>

src/views/yx/yxVipCard/components/YxVipCardForm.vue

@@ -1,70 +1,158 @@
 <template>
-    <div style="min-height: 400px">
+  <a-spin :spinning="confirmLoading">
-        <BasicForm @register="registerForm"></BasicForm>
+    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
-        <div style="width: 100%;text-align: center" v-if="!formDisabled">
+      <a-row>
-            <a-button @click="submitForm" pre-icon="ant-design:check" type="primary">提 交</a-button>
+        <a-col :span="24">
-        </div>
+          <a-form-item label="对应产品编号" v-bind="validateInfos.skuCode">
-    </div>
+            <a-input v-model:value="formData.skuCode" placeholder="请输入对应产品编号" :disabled="disabled"></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="卡号" v-bind="validateInfos.cardNum">
+            <a-input v-model:value="formData.cardNum" placeholder="请输入卡号" :disabled="disabled"></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="激活使用时间" v-bind="validateInfos.usedTime">
+            <a-date-picker placeholder="请选择激活使用时间"  v-model:value="formData.usedTime" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="有效时长(天)" v-bind="validateInfos.validTime">
+            <a-input-number v-model:value="formData.validTime" placeholder="请输入有效时长(天)" style="width: 100%" :disabled="disabled"/>
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="有效期至" v-bind="validateInfos.validDate">
+            <a-date-picker placeholder="请选择有效期至"  v-model:value="formData.validDate" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="兑换用户id" v-bind="validateInfos.userId">
+            <a-input v-model:value="formData.userId" placeholder="请输入兑换用户id" :disabled="disabled"></a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-spin>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-    import {BasicForm, useForm} from '/@/components/Form/index';
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
-    import {computed, defineComponent} from 'vue';
+import { defHttp } from '/@/utils/http/axios';
-    import {defHttp} from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
-    import { propTypes } from '/@/utils/propTypes';
+import { getValueType } from '/@/utils';
-    import {getBpmFormSchema} from '../YxVipCard.data';
+import { saveOrUpdate } from '../YxVipCard.api';
-    import {saveOrUpdate} from '../YxVipCard.api';
+import { Form } from 'ant-design-vue';
-    
-    export default defineComponent({
-        name: "YxVipCardForm",
-        components:{
-            BasicForm
-        },
-        props:{
-            formData: propTypes.object.def({}),
-            formBpm: propTypes.bool.def(true),
-        },
-        setup(props){
-            const [registerForm, { setFieldsValue, setProps, getFieldsValue }] = useForm({
-                labelWidth: 150,
-                schemas: getBpmFormSchema(props.formData),
-                showActionButtonGroup: false,
-                baseColProps: {span: 24}
-            });
 
-            const formDisabled = computed(()=>{
+const props = defineProps({
-                if(props.formData.disabled === false){
+  formDisabled: { type: Boolean, default: false },
-                    return false;
+  formData: { type: Object, default: ()=>{} },
-                }
+  formBpm: { type: Boolean, default: true }
-                return true;
+});
-            });
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  skuCode: '',
+  cardNum: '',
+  usedTime: '',
+  validTime: undefined,
+  validDate: '',
+  userId: '',
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = {
+  cardNum: [{ required: true, message: '请输入卡号!'}, { pattern: '^\d{16}$', message: '不符合校验规则!'},],
+};
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
 
-            let formData = {};
+// 表单禁用
-            const queryByIdUrl = '/yx/yxVipCard/queryById';
+const disabled = computed(()=>{
-            async function initFormData(){
+  if(props.formBpm === true){
-                let params = {id: props.formData.dataId};
+    if(props.formData.disabled === false){
-                const data = await defHttp.get({url: queryByIdUrl, params});
+      return false;
-                formData = {...data}
+    }else{
-                //设置表单的值
+      return true;
-                await setFieldsValue(formData);
+    }
-                //默认是禁用
+  }
-                await setProps({disabled: formDisabled.value})
+  return props.formDisabled;
-            }
+});
 
-            async function submitForm() {
-                let data = getFieldsValue();
-                let params = Object.assign({}, formData, data);
-                console.log('表单数据', params)
-                await saveOrUpdate(params, true)
-            }
 
-            initFormData();
+/**
-            
+ * 新增
-            return {
+ */
-                registerForm,
+function add() {
-                formDisabled,
+  edit({});
-                submitForm,
+}
-            }
+
-        }
+/**
+ * 编辑
+ */
+function edit(record) {
+  nextTick(() => {
+    resetFields();
+    //赋值
+    Object.assign(formData, record);
+  });
+}
+
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  // 触发表单验证
+  await validate();
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+  await saveOrUpdate(model, isUpdate.value)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success(res.message);
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
     });
-</script>
+}
+
+
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
+</script>
+
+<style lang="less" scoped>
+.antd-modal-form {
+  min-height: 500px !important;
+  overflow-y: auto;
+  padding: 24px 24px 24px 24px;
+}
+</style>

src/views/yx/yxVipCard/components/YxVipCardModal.vue

@@ -63,4 +63,4 @@
 	:deep(.ant-calendar-picker){
 		width: 100%
 	}
-</style>
+</style>