updates
This commit is contained in:
zhouwentao
parent
dd189f26a6
commit
c46eb07a9f
|
|
@ -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});
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -7,37 +7,71 @@ export const columns: BasicColumn[] = [
|
|||
{
|
||||
title: '订单编号（流水号）',
|
||||
align: "center",
|
||||
dataIndex: 'orderCode'
|
||||
dataIndex: 'orderCode',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: '总金额',
|
||||
align: "center",
|
||||
dataIndex: 'totalAmount'
|
||||
dataIndex: 'totalAmount',
|
||||
customRender: ({text}) => {
|
||||
if(text){
|
||||
return parseFloat(text)/100
|
||||
}
|
||||
return '未知';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '商品编号',
|
||||
align: "center",
|
||||
dataIndex: 'skuCode'
|
||||
dataIndex: 'skuCode',
|
||||
customRender: ({text}) => {
|
||||
if (text === '1001') {
|
||||
return '体验卡';
|
||||
}else if(text ==='1002'){
|
||||
return 'VIP';
|
||||
}else if(text ==='9999'){
|
||||
return '管理员';
|
||||
}else{
|
||||
return '未知';
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '支付方式：1借记卡、2信用卡、3微信、4支付宝、5现金',
|
||||
title: '支付方式',
|
||||
//1借记卡、2信用卡、3微信、4支付宝、5现金
|
||||
align: "center",
|
||||
dataIndex: 'paymentType'
|
||||
dataIndex: 'paymentType',
|
||||
},
|
||||
{
|
||||
title: '订单状态：1未付款、2已付款、3已发货、4已签收',
|
||||
title: '订单状态',//1未付款、2已付款、3已发货、4已签收
|
||||
align: "center",
|
||||
dataIndex: 'orderStatus'
|
||||
dataIndex: 'orderStatus',
|
||||
},
|
||||
{
|
||||
title: '购买用户id',
|
||||
title: '购买人手机号',
|
||||
align: "center",
|
||||
dataIndex: 'paymentUserId'
|
||||
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[] = [
|
||||
{
|
||||
|
|
@ -80,7 +114,6 @@ export const formSchema: FormSchema[] = [
|
|||
];
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 流程表单调用这个方法获取formSchema
|
||||
* @param param
|
||||
|
|
|
|||
|
|
@ -1,12 +1,52 @@
|
|||
<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">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
|
||||
<template v-if="false" #tableTitle>
|
||||
<!-- <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-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>
|
||||
<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>
|
||||
|
|
@ -21,9 +61,29 @@
|
|||
</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}">
|
||||
|
|
@ -35,7 +95,9 @@
|
|||
</template>
|
||||
<template #fileSlot="{text}">
|
||||
<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,7 +106,11 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" name="yx-yxOrder" setup>
|
||||
import {ref, computed, unref} from 'vue';
|
||||
import {ref, computed, unref, reactive} from 'vue';
|
||||
import {
|
||||
WechatOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import {Tag, Avatar} from 'ant-design-vue';
|
||||
import {BasicTable, useTable, TableAction} from '/@/components/Table';
|
||||
import {useModal} from '/@/components/Modal';
|
||||
import {useListPage} from '/@/hooks/system/useListPage'
|
||||
|
|
@ -52,30 +118,44 @@
|
|||
import {columns, searchFormSchema} from './YxOrder.data';
|
||||
import {list, deleteOne, batchDelete, getImportUrl, getExportUrl} from './YxOrder.api';
|
||||
import {downloadFile} from '/@/utils/common/renderUtils';
|
||||
|
||||
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: {
|
||||
title: '订单表',
|
||||
api: list,
|
||||
columns,
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
formConfig: {
|
||||
//labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
autoSubmitOnEnter: true,
|
||||
showAdvancedButton: true,
|
||||
fieldMapToNumber: [
|
||||
],
|
||||
fieldMapToTime: [
|
||||
],
|
||||
fieldMapToNumber: [],
|
||||
fieldMapToTime: [],
|
||||
},
|
||||
actionColumn: {
|
||||
beforeFetch: (params) => {
|
||||
return Object.assign(params, queryParam);
|
||||
},
|
||||
bordered: true,
|
||||
showTableSetting: false,
|
||||
showActionColumn: false,//是否显示操作
|
||||
/*actionColumn: {
|
||||
width: 120,
|
||||
fixed: 'right'
|
||||
},
|
||||
},*/
|
||||
},
|
||||
exportConfig: {
|
||||
name: "订单表",
|
||||
|
|
@ -98,6 +178,7 @@
|
|||
showFooter: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑事件
|
||||
*/
|
||||
|
|
@ -108,6 +189,7 @@
|
|||
showFooter: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
|
|
@ -118,24 +200,28 @@
|
|||
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();
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
|
|
@ -147,6 +233,7 @@
|
|||
}
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉操作栏
|
||||
*/
|
||||
|
|
@ -165,6 +252,47 @@
|
|||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断 状态的颜色
|
||||
*/
|
||||
function getStatusColor(orderStatus) {
|
||||
if (orderStatus === '2') {
|
||||
return 'success'
|
||||
}
|
||||
return 'default'
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,11 @@ export const columns: BasicColumn[] = [
|
|||
dataIndex: 'validTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '有效日期至',
|
||||
align: "center",
|
||||
dataIndex: 'validDate'
|
||||
},
|
||||
/*{
|
||||
title: '有效日期',
|
||||
align:"center",
|
||||
|
|
@ -28,14 +33,21 @@ export const columns: BasicColumn[] = [
|
|||
dataIndex: 'skuCode_dictText'
|
||||
},
|
||||
{
|
||||
title: '兑换用户id',
|
||||
title: '使用日期',
|
||||
align: "center",
|
||||
dataIndex: 'userId'
|
||||
dataIndex: 'usedTime',
|
||||
sorter: {
|
||||
multiple: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '兑换用户手机号',
|
||||
align: "center",
|
||||
dataIndex: 'userId_dictText',//userId
|
||||
},
|
||||
];
|
||||
//查询数据
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
];
|
||||
export const searchFormSchema: FormSchema[] = [];
|
||||
//表单数据
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
|
|
@ -83,7 +95,6 @@ export const formSchema: FormSchema[] = [
|
|||
];
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 流程表单调用这个方法获取formSchema
|
||||
* @param param
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<!-- <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 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>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,158 @@
|
|||
<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>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="对应产品编号" v-bind="validateInfos.skuCode">
|
||||
<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">
|
||||
import {BasicForm, useForm} from '/@/components/Form/index';
|
||||
import {computed, defineComponent} from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import {getBpmFormSchema} from '../YxVipCard.data';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { getValueType } from '/@/utils';
|
||||
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 props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: ()=>{} },
|
||||
formBpm: { type: Boolean, default: 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 });
|
||||
|
||||
const formDisabled = computed(()=>{
|
||||
// 表单禁用
|
||||
const disabled = computed(()=>{
|
||||
if(props.formBpm === true){
|
||||
if(props.formData.disabled === false){
|
||||
return false;
|
||||
}
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return props.formDisabled;
|
||||
});
|
||||
|
||||
let formData = {};
|
||||
const queryByIdUrl = '/yx/yxVipCard/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})
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add() {
|
||||
edit({});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function edit(record) {
|
||||
nextTick(() => {
|
||||
resetFields();
|
||||
//赋值
|
||||
Object.assign(formData, record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
async function submitForm() {
|
||||
let data = getFieldsValue();
|
||||
let params = Object.assign({}, formData, data);
|
||||
console.log('表单数据', params)
|
||||
await saveOrUpdate(params, true)
|
||||
// 触发表单验证
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
initFormData();
|
||||
|
||||
return {
|
||||
registerForm,
|
||||
formDisabled,
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue