订单列表页面接入，修改crud搜索支持radio-button类型
This commit is contained in:
parent
3cd59b4cd7
commit
9dc8e6b866
|
|
@ -0,0 +1,216 @@
|
|||
import request from "@/utils/request";
|
||||
import { System_BaseUrl } from "@/api/config";
|
||||
const baseURL = System_BaseUrl + "/admin/order";
|
||||
const OrderApi = {
|
||||
getList(params: getListRequest) {
|
||||
return request<any, getListResponse>({
|
||||
url: `${baseURL}`,
|
||||
method: "get",
|
||||
params: params,
|
||||
});
|
||||
},
|
||||
add() {},
|
||||
edit() {},
|
||||
delete() {},
|
||||
};
|
||||
|
||||
export default OrderApi;
|
||||
// 订单状态
|
||||
export type statusType =
|
||||
| "unpaid"
|
||||
| "in-production"
|
||||
| "wait-out"
|
||||
| "done"
|
||||
| "refunding"
|
||||
| "refund"
|
||||
| "part-refund"
|
||||
| "cancelled"
|
||||
| "";
|
||||
|
||||
// 发货类型
|
||||
export type sendType = "post" | "takeaway" | "takeself" | "table" | "";
|
||||
//订单类型
|
||||
export type orderType = "cash" | "miniapp" | "offline" | "";
|
||||
//是否回收站 0-否，1回收站 默认查未删除
|
||||
export type isDel = 0 | 1;
|
||||
|
||||
export interface getListRequest {
|
||||
endTime?: string;
|
||||
/**
|
||||
* 是否回收站 0-否，1回收站 默认查未删除
|
||||
*/
|
||||
isDel?: isDel;
|
||||
/**
|
||||
* 订单编号
|
||||
*/
|
||||
orderNo?: string;
|
||||
/**
|
||||
* 订单类型-cash收银-miniapp小程序-offline线下
|
||||
*/
|
||||
orderType?: orderType;
|
||||
/**
|
||||
* 支付类型
|
||||
*/
|
||||
payType?: string;
|
||||
/**
|
||||
* 平台类型
|
||||
*/
|
||||
platformType?: string;
|
||||
/**
|
||||
* 查询包含该商品的 所有订单
|
||||
*/
|
||||
productName?: string;
|
||||
/**
|
||||
* 发货类型post快递，takeaway外卖,takeself,自提table---堂食
|
||||
*/
|
||||
sendType?: sendType;
|
||||
/**
|
||||
* 店铺Id
|
||||
*/
|
||||
shopId?: number;
|
||||
startTime?: string;
|
||||
/**
|
||||
* 状态: unpaid-待支付;in-production 制作中;wait-out
|
||||
* 待取餐;;done-订单完成;refunding-申请退单;refund-退单;part-refund 部分退单;cancelled-取消订单
|
||||
*/
|
||||
status?: statusType;
|
||||
/**
|
||||
* 台桌id
|
||||
*/
|
||||
tableId?: string;
|
||||
/**
|
||||
* 台桌名称
|
||||
*/
|
||||
tableName?: string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* CzgResultPageOrderInfoVo
|
||||
*/
|
||||
export interface getListResponse {
|
||||
code?: number;
|
||||
data?: PageOrderInfoVo;
|
||||
msg?: string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* PageOrderInfoVo
|
||||
*/
|
||||
export interface PageOrderInfoVo {
|
||||
maxPageSize?: number;
|
||||
optimizeCountQuery?: boolean;
|
||||
pageNumber?: number;
|
||||
pageSize?: number;
|
||||
records?: OrderInfoVo[];
|
||||
totalPage?: number;
|
||||
totalRow?: number;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单表 通用展示类
|
||||
*
|
||||
* OrderInfoVo
|
||||
*/
|
||||
export interface OrderInfoVo {
|
||||
createTime?: string;
|
||||
/**
|
||||
* 用餐模式 堂食 dine-in 外带 take-out 外卖 take-away
|
||||
*/
|
||||
dineMode?: string;
|
||||
/**
|
||||
* 订单商品列表
|
||||
*/
|
||||
goods?: OrderDetailSmallVO[];
|
||||
id?: number;
|
||||
/**
|
||||
* 是否使用了霸王餐
|
||||
*/
|
||||
isFreeDine?: number;
|
||||
/**
|
||||
* 订单金额 (扣除各类折扣)
|
||||
*/
|
||||
orderAmount?: number;
|
||||
/**
|
||||
* 订单编号
|
||||
*/
|
||||
orderNo?: string;
|
||||
/**
|
||||
* 订单类型-
|
||||
* cash收银(除小程序以外 都属于收银)
|
||||
* miniapp小程序
|
||||
*/
|
||||
orderType?: orderType;
|
||||
/**
|
||||
* 订单原金额 不含折扣价格
|
||||
*/
|
||||
originAmount?: number;
|
||||
/**
|
||||
* 支付时间
|
||||
*/
|
||||
paidTime?: string;
|
||||
/**
|
||||
* 实际支付金额
|
||||
*/
|
||||
payAmount?: number;
|
||||
/**
|
||||
* 支付订单号
|
||||
*/
|
||||
payOrderNo?: string;
|
||||
/**
|
||||
* 支付类型
|
||||
* 主扫 main-scan
|
||||
* 被扫 back-scan
|
||||
* 微信小程序 wechat-mini
|
||||
* 支付宝小程序 alipay-mini
|
||||
* 会员支付 vip-pay
|
||||
* 现金支付 cash-pay
|
||||
*/
|
||||
payType?: string;
|
||||
/**
|
||||
* 平台类型 pc 收银机客户端 wechat 微信小程序 alipay 支付宝小程序 admin-pc PC管理端 admin-app APP管理端
|
||||
*/
|
||||
platformType?: string;
|
||||
/**
|
||||
* 是否支持退款，1支持退单， 0不支持退单
|
||||
*/
|
||||
refundAble?: number;
|
||||
/**
|
||||
* 退单金额
|
||||
*/
|
||||
refundAmount?: number;
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
remark?: string;
|
||||
/**
|
||||
* 店铺Id
|
||||
*/
|
||||
shopId?: string;
|
||||
/**
|
||||
* 状态: unpaid-待支付;in-production 制作中;wait-out
|
||||
* 待取餐;;done-订单完成;refunding-申请退单;refund-退单;part-refund 部分退单;cancelled-取消订单
|
||||
*/
|
||||
status?: statusType;
|
||||
/**
|
||||
* 台桌名称
|
||||
*/
|
||||
tableName?: string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单详情 实体类。
|
||||
*
|
||||
* OrderDetailSmallVO
|
||||
*/
|
||||
export interface OrderDetailSmallVO {
|
||||
num?: number;
|
||||
productImg?: string;
|
||||
productName?: string;
|
||||
refundNum?: number;
|
||||
skuName?: string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
|
@ -535,8 +535,8 @@ const pagination = reactive(
|
|||
);
|
||||
// 分页相关的请求参数
|
||||
const request = props.contentConfig.request ?? {
|
||||
pageName: "pageNum",
|
||||
limitName: "pageSize",
|
||||
pageName: "page",
|
||||
limitName: "size",
|
||||
};
|
||||
|
||||
const tableRef = ref<TableInstance>();
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
shadow="never"
|
||||
class="mb-[10px]"
|
||||
>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="inline">
|
||||
<template v-for="(item, index) in formItems" :key="item.prop">
|
||||
<el-form-item
|
||||
v-show="isExpand ? true : index < showNumber"
|
||||
|
|
@ -36,6 +36,14 @@
|
|||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</template>
|
||||
<!-- radio-button radio按钮组 -->
|
||||
<template v-if="item.type === 'radio-button'">
|
||||
<el-radio-group v-model="queryParams[item.prop]" v-bind="item.attrs">
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-radio-button :label="option.label" :value="option.value" />
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<!-- InputTag 标签输入框 -->
|
||||
<template v-if="item.type === 'input-tag'">
|
||||
<div class="flex-center">
|
||||
|
|
@ -131,6 +139,10 @@ const emit = defineEmits<{
|
|||
}>();
|
||||
|
||||
const queryFormRef = ref<FormInstance>();
|
||||
//form表单展示形式
|
||||
const inline = ref<boolean>(
|
||||
props.searchConfig.inline === undefined ? true : !!props.searchConfig.inline
|
||||
);
|
||||
// 是否显示
|
||||
const visible = ref(true);
|
||||
// 响应式的formItems
|
||||
|
|
|
|||
|
|
@ -29,10 +29,11 @@ export interface IOperatData {
|
|||
export interface ISearchConfig {
|
||||
// 页面名称(参与组成权限标识,如sys:user:xxx)
|
||||
pageName: string;
|
||||
inline?: Boolean;
|
||||
// 表单项
|
||||
formItems: Array<{
|
||||
// 组件类型(如input,select等)
|
||||
type?: "input" | "select" | "tree-select" | "date-picker" | "input-tag";
|
||||
type?: "input" | "select" | "tree-select" | "date-picker" | "input-tag" | "radio-button";
|
||||
// 标签文本
|
||||
label: string;
|
||||
// 标签提示
|
||||
|
|
|
|||
|
|
@ -463,7 +463,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
children: [
|
||||
{
|
||||
path: "index",
|
||||
component: () => import("@/views/order/index.vue"),
|
||||
component: () => import("@/views/order/index/index.vue"),
|
||||
name: "orderIndex",
|
||||
meta: {
|
||||
title: "订单列表",
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ declare global {
|
|||
* 分页查询参数
|
||||
*/
|
||||
interface PageQuery {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
page: number;
|
||||
size: number;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { property } from "lodash";
|
||||
|
||||
export const sourceOptions: options[] = [
|
||||
{ label: "桌面端", value: "pc" },
|
||||
{ label: "管理端", value: "manager_app" },
|
||||
|
|
@ -39,4 +41,5 @@ export function returnOptionsLabel(optionsType: optionsType, value: string | num
|
|||
export interface options {
|
||||
label: string;
|
||||
value: string | number;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<template></template>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
import VersionApi, { type addRequest } from "@/api/system/version";
|
||||
import type { IModalConfig } from "@/components/CURD/types";
|
||||
|
||||
const modalConfig: IModalConfig<addRequest> = {
|
||||
pageName: "sys:user",
|
||||
dialog: {
|
||||
title: "新增版本",
|
||||
width: 800,
|
||||
draggable: true,
|
||||
},
|
||||
form: {
|
||||
labelWidth: 140,
|
||||
},
|
||||
formAction: function (data) {
|
||||
return VersionApi.add({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
|
||||
},
|
||||
beforeSubmit(data) {
|
||||
console.log("提交之前处理", data);
|
||||
},
|
||||
formItems: [
|
||||
{
|
||||
label: "渠道",
|
||||
prop: "source",
|
||||
rules: [{ required: true, message: "请选择渠道", trigger: "blur" }],
|
||||
type: "select",
|
||||
attrs: {
|
||||
placeholder: "请选择渠道",
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
label: "类型",
|
||||
prop: "type",
|
||||
rules: [{ required: true, message: "请选择类型", trigger: "blur" }],
|
||||
type: "select",
|
||||
attrs: {
|
||||
placeholder: "请选择类型",
|
||||
},
|
||||
col: {
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "版本号",
|
||||
prop: "version",
|
||||
rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入版本号",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "radio",
|
||||
label: "是否强制更新",
|
||||
prop: "isForce",
|
||||
rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入版本号",
|
||||
},
|
||||
initialValue: 0,
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: "textarea",
|
||||
label: "更新提示内容",
|
||||
prop: "message",
|
||||
rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入更新提示内容",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "custom",
|
||||
label: "版本文件",
|
||||
prop: "url",
|
||||
rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请上传版本文件",
|
||||
},
|
||||
initialValue: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
|
||||
export default reactive(modalConfig);
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
import type { statusType } from "@/api/system/order";
|
||||
export const statusOptions: statusOptions[] = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "待支付", value: "unpaid" },
|
||||
{ label: "制作中", value: "in-production" },
|
||||
{ label: "待取餐", value: "wait-out" },
|
||||
{ label: "订单完成", value: "done" },
|
||||
{ label: "申请退单", value: "refunding" },
|
||||
{ label: "退单", value: "refund" },
|
||||
{ label: "部分退单", value: "part-refund" },
|
||||
{ label: "取消订单", value: "cancelled" },
|
||||
];
|
||||
export const payTypeOptions: payTypeOptions[] = [
|
||||
{ label: "全部", value: "" },
|
||||
{
|
||||
label: "现金",
|
||||
value: "cash",
|
||||
},
|
||||
{
|
||||
label: "银行卡",
|
||||
value: "bank",
|
||||
},
|
||||
{
|
||||
label: "扫码支付",
|
||||
value: "scanCode",
|
||||
},
|
||||
{
|
||||
label: "储值卡",
|
||||
value: "deposit",
|
||||
},
|
||||
{
|
||||
label: "会员支付",
|
||||
value: "vipPay",
|
||||
},
|
||||
{
|
||||
label: "挂账",
|
||||
value: "arrears",
|
||||
},
|
||||
];
|
||||
export type optionsType = "status";
|
||||
|
||||
export function returnOptions(type: optionsType) {
|
||||
if (type === "status") {
|
||||
return statusOptions;
|
||||
}
|
||||
}
|
||||
|
||||
export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
|
||||
const options = returnOptions(optionsType);
|
||||
if (!options) {
|
||||
return "";
|
||||
}
|
||||
const option = options.find((item) => item.value === value);
|
||||
return option ? option.label : "";
|
||||
}
|
||||
|
||||
export interface options {
|
||||
label: string;
|
||||
value: string | number;
|
||||
[property: string]: any;
|
||||
}
|
||||
export interface statusOptions extends options {
|
||||
value: statusType;
|
||||
}
|
||||
|
||||
export type payTypeValue =
|
||||
| ""
|
||||
| "cash"
|
||||
| "bank"
|
||||
| "scanCode"
|
||||
| "deposit"
|
||||
| "vipPay"
|
||||
| "arrears"
|
||||
| "virtual"
|
||||
| "arrears";
|
||||
|
||||
export interface payTypeOptions extends options {
|
||||
value: payTypeValue;
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import OrderApi from "@/api/system/order";
|
||||
import type { editRequest } from "@/api/system/version";
|
||||
import type { IContentConfig } from "@/components/CURD/types";
|
||||
|
||||
const contentConfig: IContentConfig = {
|
||||
pageName: "sys:user",
|
||||
table: {
|
||||
border: true,
|
||||
highlightCurrentRow: true,
|
||||
},
|
||||
pagination: {
|
||||
background: true,
|
||||
layout: "prev,pager,next,jumper,total,sizes",
|
||||
pageSize: 20,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
},
|
||||
indexAction: function (params) {
|
||||
return OrderApi.getList(params);
|
||||
},
|
||||
// deleteAction: OrderApi.delete,
|
||||
// modifyAction: function (data) {
|
||||
// // return OrderApi.edit(data);
|
||||
// },
|
||||
pk: "id",
|
||||
toolbar: ["add"],
|
||||
defaultToolbar: ["refresh", "filter", "search"],
|
||||
cols: [
|
||||
{ type: "selection", width: 50, align: "center" },
|
||||
// { label: "id", align: "center", prop: "id", width: 100, show: true },
|
||||
{
|
||||
label: "订单号信息",
|
||||
align: "center",
|
||||
prop: "orderNo",
|
||||
width: 120,
|
||||
},
|
||||
|
||||
{
|
||||
label: "操作",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 280,
|
||||
templet: "tool",
|
||||
operat: [
|
||||
{
|
||||
icon: "Document",
|
||||
name: "detail",
|
||||
text: "详情",
|
||||
},
|
||||
{
|
||||
icon: "Printer",
|
||||
name: "printer",
|
||||
text: "开票",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default contentConfig;
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
import type { IContentConfig } from "@/components/CURD/types";
|
||||
|
||||
const contentConfig: IContentConfig = {
|
||||
pageName: "sys:user",
|
||||
table: {
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
toolbar: [],
|
||||
indexAction: function (params) {
|
||||
// 模拟发起网络请求获取列表数据
|
||||
console.log("indexAction:", params);
|
||||
return Promise.resolve({
|
||||
total: 2,
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
username: "tom",
|
||||
avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
|
||||
percent: 99,
|
||||
price: 10,
|
||||
url: "https://www.baidu.com",
|
||||
icon: "el-icon-setting",
|
||||
gender: 1,
|
||||
status: 1,
|
||||
status2: 1,
|
||||
sort: 99,
|
||||
createTime: 1715647982437,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
username: "jerry",
|
||||
avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
|
||||
percent: 88,
|
||||
price: 999,
|
||||
url: "https://www.google.com",
|
||||
icon: "el-icon-user",
|
||||
gender: 0,
|
||||
status: 0,
|
||||
status2: 0,
|
||||
sort: 0,
|
||||
createTime: 1715648977426,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
modifyAction(data) {
|
||||
// 模拟发起网络请求修改字段
|
||||
// console.log("modifyAction:", data);
|
||||
ElMessage.success(JSON.stringify(data));
|
||||
return Promise.resolve(null);
|
||||
},
|
||||
cols: [
|
||||
{ type: "index", width: 50, align: "center" },
|
||||
{ label: "ID", align: "center", prop: "id", show: false },
|
||||
{ label: "文本", align: "center", prop: "username" },
|
||||
{ label: "图片", align: "center", prop: "avatar", templet: "image" },
|
||||
{
|
||||
label: "百分比",
|
||||
align: "center",
|
||||
prop: "percent",
|
||||
templet: "percent",
|
||||
},
|
||||
{
|
||||
label: "货币符",
|
||||
align: "center",
|
||||
prop: "price",
|
||||
templet: "price",
|
||||
priceFormat: "$",
|
||||
},
|
||||
{ label: "链接", align: "center", prop: "url", width: 180, templet: "url" },
|
||||
{ label: "图标", align: "center", prop: "icon", templet: "icon" },
|
||||
{
|
||||
label: "列表值",
|
||||
align: "center",
|
||||
prop: "gender",
|
||||
templet: "list",
|
||||
selectList: { "0": "女", "1": "男" },
|
||||
},
|
||||
{
|
||||
label: "自定义",
|
||||
align: "center",
|
||||
prop: "status",
|
||||
templet: "custom",
|
||||
slotName: "status",
|
||||
},
|
||||
{
|
||||
label: "Switch",
|
||||
align: "center",
|
||||
prop: "status2",
|
||||
templet: "switch",
|
||||
activeValue: 1,
|
||||
inactiveValue: 0,
|
||||
activeText: "启用",
|
||||
inactiveText: "禁用",
|
||||
},
|
||||
{
|
||||
label: "输入框",
|
||||
align: "center",
|
||||
prop: "sort",
|
||||
templet: "input",
|
||||
inputType: "number",
|
||||
},
|
||||
{
|
||||
label: "日期格式化",
|
||||
align: "center",
|
||||
prop: "createTime",
|
||||
minWidth: 120,
|
||||
templet: "date",
|
||||
dateFormat: "YYYY/MM/DD HH:mm:ss",
|
||||
},
|
||||
{
|
||||
label: "操作栏",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 220,
|
||||
templet: "tool",
|
||||
operat: [
|
||||
{
|
||||
name: "reset_pwd",
|
||||
auth: "password:reset",
|
||||
icon: "refresh-left",
|
||||
text: "重置密码",
|
||||
type: "primary",
|
||||
render(row) {
|
||||
return row.id === 1;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default contentConfig;
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import VersionApi, { type editRequest } from "@/api/system/version";
|
||||
import type { IModalConfig } from "@/components/CURD/types";
|
||||
|
||||
const modalConfig: IModalConfig<editRequest> = {
|
||||
pageName: "sys:user",
|
||||
dialog: {
|
||||
title: "编辑版本",
|
||||
width: 800,
|
||||
draggable: true,
|
||||
},
|
||||
pk: "id",
|
||||
formAction: function (data) {
|
||||
return VersionApi.edit({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
|
||||
},
|
||||
beforeSubmit(data) {
|
||||
console.log("提交之前处理", data);
|
||||
},
|
||||
formItems: [
|
||||
{
|
||||
type: "input",
|
||||
label: "版本号",
|
||||
prop: "version",
|
||||
rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入版本号",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
type: "textarea",
|
||||
label: "更新提示内容",
|
||||
prop: "message",
|
||||
rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入更新提示内容",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "custom",
|
||||
label: "版本文件",
|
||||
prop: "url",
|
||||
rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请上传版本文件",
|
||||
},
|
||||
initialValue: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default reactive(modalConfig);
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import type { ISearchConfig } from "@/components/CURD/types";
|
||||
import { statusOptions, payTypeOptions } from "./config";
|
||||
const searchConfig: ISearchConfig = {
|
||||
pageName: "sys:user",
|
||||
inline: false,
|
||||
isExpandable: false,
|
||||
formItems: [
|
||||
{
|
||||
type: "radio-button",
|
||||
label: "订单状态",
|
||||
prop: "status",
|
||||
attrs: {
|
||||
placeholder: "请选择订单状态",
|
||||
clearable: true,
|
||||
},
|
||||
options: statusOptions,
|
||||
initialValue: "",
|
||||
},
|
||||
{
|
||||
type: "radio-button",
|
||||
label: "支付方式",
|
||||
prop: "payType",
|
||||
attrs: {
|
||||
placeholder: "请选择支付方式",
|
||||
clearable: true,
|
||||
},
|
||||
options: payTypeOptions,
|
||||
initialValue: "",
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "订单编号",
|
||||
prop: "orderNo",
|
||||
attrs: {
|
||||
placeholder: "请输入订单编号",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "商品名称",
|
||||
prop: "productName",
|
||||
attrs: {
|
||||
placeholder: "请输入商品名称",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default searchConfig;
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 列表 -->
|
||||
<template v-if="isA">
|
||||
<!-- 搜索 -->
|
||||
<page-search
|
||||
ref="searchRef"
|
||||
:search-config="searchConfig"
|
||||
@query-click="handleQueryClick"
|
||||
@reset-click="handleResetClick"
|
||||
/>
|
||||
<!-- 列表 -->
|
||||
<page-content
|
||||
ref="contentRef"
|
||||
:content-config="contentConfig"
|
||||
@add-click="handleAddClick"
|
||||
@edit-click="handleEditClick"
|
||||
@export-click="handleExportClick"
|
||||
@search-click="handleSearchClick"
|
||||
@toolbar-click="handleToolbarClick"
|
||||
@operat-click="handleOperatClick"
|
||||
@filter-change="handleFilterChange"
|
||||
>
|
||||
<template #status="scope">
|
||||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
||||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #options="scope">
|
||||
{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
|
||||
</template>
|
||||
<template #gender="scope">
|
||||
<DictLabel v-model="scope.row[scope.prop]" code="gender" />
|
||||
</template>
|
||||
<template #mobile="scope">
|
||||
<el-text>{{ scope.row[scope.prop] }}</el-text>
|
||||
<copy-button
|
||||
v-if="scope.row[scope.prop]"
|
||||
:text="scope.row[scope.prop]"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</template>
|
||||
</page-content>
|
||||
|
||||
<!-- 新增 -->
|
||||
<page-modal
|
||||
ref="addModalRef"
|
||||
:modal-config="addModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
>
|
||||
<template #url="scope">
|
||||
<FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
|
||||
<!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
|
||||
</template>
|
||||
</page-modal>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<page-modal
|
||||
ref="editModalRef"
|
||||
:modal-config="editModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
>
|
||||
<template #url="scope">
|
||||
<FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
|
||||
<!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
|
||||
</template>
|
||||
</page-modal>
|
||||
</template>
|
||||
<template v-else>
|
||||
<page-content
|
||||
ref="contentRef"
|
||||
:content-config="contentConfig2"
|
||||
@operat-click="handleOperatClick"
|
||||
>
|
||||
<template #status="scope">
|
||||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
||||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</page-content>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import VersionApi from "@/api/system/version";
|
||||
import DeptAPI from "@/api/system/dept";
|
||||
import RoleAPI from "@/api/system/role";
|
||||
import type { IObject, IOperatData } from "@/components/CURD/types";
|
||||
import usePage from "@/components/CURD/usePage";
|
||||
import addModalConfig from "./config/add";
|
||||
import contentConfig from "./config/content";
|
||||
import contentConfig2 from "./config/content2";
|
||||
import editModalConfig from "./config/edit";
|
||||
import searchConfig from "./config/search";
|
||||
import { returnOptionsLabel } from "./config/config";
|
||||
|
||||
const {
|
||||
searchRef,
|
||||
contentRef,
|
||||
addModalRef,
|
||||
editModalRef,
|
||||
handleQueryClick,
|
||||
handleResetClick,
|
||||
// handleAddClick,
|
||||
// handleEditClick,
|
||||
handleSubmitClick,
|
||||
handleExportClick,
|
||||
handleSearchClick,
|
||||
handleFilterChange,
|
||||
} = usePage();
|
||||
|
||||
// 新增
|
||||
async function handleAddClick() {
|
||||
addModalRef.value?.setModalVisible();
|
||||
// 加载部门下拉数据源
|
||||
// addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||||
// 加载角色下拉数据源
|
||||
// addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||||
}
|
||||
// 编辑
|
||||
async function handleEditClick(row: IObject) {
|
||||
editModalRef.value?.handleDisabled(false);
|
||||
editModalRef.value?.setModalVisible();
|
||||
// 根据id获取数据进行填充
|
||||
// const data = await VersionApi.getFormData(row.id);
|
||||
console.log({ ...row, url: [row.url] });
|
||||
editModalRef.value?.setFormData({ ...row, url: [row.url] });
|
||||
}
|
||||
1;
|
||||
// 其他工具栏
|
||||
function handleToolbarClick(name: string) {
|
||||
console.log(name);
|
||||
if (name === "custom1") {
|
||||
ElMessage.success("点击了自定义1按钮");
|
||||
}
|
||||
}
|
||||
// 其他操作列
|
||||
async function handleOperatClick(data: IOperatData) {
|
||||
console.log(data);
|
||||
if (data.name === "detail") {
|
||||
return;
|
||||
}
|
||||
if (data.name === "printer") {
|
||||
}
|
||||
}
|
||||
|
||||
// 切换示例
|
||||
const isA = ref(true);
|
||||
</script>
|
||||
Loading…
Reference in New Issue