gxwebsoft/yunxinwei-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
gxwebsoft
2023-08-04 13:32:43 +08:00
commit c02e8be49b
1151 changed files with 200453 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
src/views/apps/cashier/components/cashier-edit.vue Normal file
View File

@@ -0,0 +1,275 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="680"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '编辑订单' : '添加订单'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-space>
<a-form
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
>
<a-row :gutter="16">
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="订单号" v-bind="validateInfos.outTradeNo">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入订单号"
v-model:value="form.outTradeNo"
@blur="
validate('outTradeNo', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="客户ID" v-bind="validateInfos.buyerId">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入客户ID"
v-model:value="form.buyerId"
/>
</a-form-item>
<a-form-item label="设备ID" v-bind="validateInfos.buyerId">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入设备ID"
v-model:value="form.merchantCode"
/>
</a-form-item>
<a-form-item label="支付标识" v-bind="validateInfos.code">
<a-input
allow-clear
:maxlength="20"
placeholder="支付标识"
v-model:value="form.code"
/>
</a-form-item>
<a-form-item label="数量" v-bind="validateInfos.amount">
<a-input
allow-clear
:maxlength="20"
placeholder="数量"
v-model:value="form.amount"
/>
</a-form-item>
<a-form-item label="支付时间" v-bind="validateInfos.payTime">
<a-input
allow-clear
:maxlength="20"
placeholder="支付时间"
v-model:value="form.payTime"
/>
</a-form-item>
<a-form-item label="订单状态" v-bind="validateInfos.orderStatus">
<a-input
allow-clear
:maxlength="20"
placeholder="订单状态"
v-model:value="form.orderStatus"
/>
</a-form-item>
<a-form-item label="商户名称" v-bind="validateInfos.merchantName">
<a-input
allow-clear
:maxlength="20"
placeholder="商户名称"
v-model:value="form.merchantName"
/>
</a-form-item>
<a-form-item label="手机号码" v-bind="validateInfos.mobile">
<a-input
allow-clear
:maxlength="20"
placeholder="手机号码"
v-model:value="form.mobile"
/>
</a-form-item>
</a-col>
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="消息" v-bind="validateInfos.msg">
<a-input
allow-clear
:maxlength="20"
placeholder="消息"
v-model:value="form.msg"
/>
</a-form-item>
<a-form-item label="支付方式" v-bind="validateInfos.payType">
<a-input
allow-clear
:maxlength="20"
placeholder="支付方式"
v-model:value="form.payType"
/>
</a-form-item>
<a-form-item label="交易金额" v-bind="validateInfos.totalAmount">
<a-input
allow-clear
:maxlength="20"
placeholder="交易金额"
v-model:value="form.totalAmount"
/>
</a-form-item>
<a-form-item label="实收金额" v-bind="validateInfos.receiptAmount">
<a-input
allow-clear
:maxlength="20"
placeholder="实收金额"
v-model:value="form.receiptAmount"
/>
</a-form-item>
<a-form-item label="手续费" v-bind="validateInfos.feeAmount">
<a-input
allow-clear
:maxlength="20"
placeholder="第三方交易手续费"
v-model:value="form.feeAmount"
/>
</a-form-item>
<a-form-item label="结算金额" v-bind="validateInfos.settleAmount">
<a-input
allow-clear
:maxlength="20"
placeholder="第三方结算金额"
v-model:value="form.settleAmount"
/>
</a-form-item>
<a-form-item label="租户编号" v-bind="validateInfos.tenantId">
<a-input
allow-clear
:maxlength="20"
placeholder="租户编号"
v-model:value="form.tenantId"
/>
</a-form-item>
<a-form-item label="备注" v-bind="validateInfos.orderRemark">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入备注"
v-model:value="form.orderRemark"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-space>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import { addCashier, updateCashier } from '@/api/apps/cashier';
import type { Cashier } from '@/api/apps/cashier/model';
const useForm = Form.useForm;
// 是否是修改
const isUpdate = ref(false);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Cashier | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 用户信息
const form = reactive<Cashier>({
cashierId: 0,
outTradeNo: '',
buyerId: '',
payType: '',
code: '',
amount: undefined,
totalAmount: undefined,
feeAmount: undefined,
receiptAmount: undefined,
settleAmount: undefined,
orderRemark: '',
orderStatus: '',
payTime: '',
merchantName: '',
mobile: '',
msg: '',
tenantId: 2,
sign: 'dk9mci8mcQ5Wa4xWRiojEjI6IibNJCLvl2cyVmdiwiIgwQ0NRNkICL0kjNIzojI0NWZqJWd6ICZpJISOuRpnM1JyetRWQlf0NW=='
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
outTradeNo: [
{
required: true,
type: 'string',
message: '请输入订单号',
trigger: 'blur'
}
]
});
const { resetFields, validate, validateInfos } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
const data = {
...form
};
// 转字符串
const saveOrUpdate = isUpdate.value ? updateCashier : addCashier;
saveOrUpdate(data)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignObject(form, props.data);
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less"></style>

147
src/views/apps/cashier/components/cashier-info.vue Normal file
View File

@@ -0,0 +1,147 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="75%"
:visible="visible"
:confirm-loading="loading"
:title="'订单详情'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
:footer="null"
>
<a-form
:label-col="{ md: { span: 4 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
>
<div class="base-form" style="margin-bottom: 20px">
<a-descriptions title="订单详情" bordered>
<a-descriptions-item label="订单号">
{{ cashier.outTradeNo }}
</a-descriptions-item>
<a-descriptions-item label="客户ID">
{{ cashier.buyerId }}
</a-descriptions-item>
<a-descriptions-item label="支付标识">
{{ cashier.code }}
</a-descriptions-item>
<a-descriptions-item label="数量">
{{ cashier.amount }}
</a-descriptions-item>
<a-descriptions-item label="支付时间">
{{ cashier.payTime }}
</a-descriptions-item>
<a-descriptions-item label="订单状态">
{{ cashier.orderStatus }}
</a-descriptions-item>
<a-descriptions-item label="商户名称">
{{ cashier.merchantName }}
</a-descriptions-item>
<a-descriptions-item label="手机号码">
{{ cashier.mobile }}
</a-descriptions-item>
<a-descriptions-item label="消息">
{{ cashier.msg }}
</a-descriptions-item>
<a-descriptions-item label="支付方式">
{{ cashier.payType }}
</a-descriptions-item>
<a-descriptions-item label="交易金额">
<a-statistic type="circle" :value="cashier.totalAmount" />
</a-descriptions-item>
<a-descriptions-item label="实收金额">
<a-statistic type="circle" :value="cashier.receiptAmount" />
</a-descriptions-item>
<a-descriptions-item label="手续费">
<a-statistic :value="cashier.feeAmount" />
</a-descriptions-item>
<a-descriptions-item label="第三方交易手续费">
<a-statistic :value="cashier.feeAmount" />
</a-descriptions-item>
<a-descriptions-item label="结算金额">
<a-statistic :value="cashier.settleAmount" />
</a-descriptions-item>
<a-descriptions-item label="备注">
{{ cashier.orderRemark }}
</a-descriptions-item>
</a-descriptions>
</div>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import type { Cashier } from '@/api/apps/cashier/model';
import { AntDesignOutlined } from '@ant-design/icons-vue';
const useForm = Form.useForm;
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Cashier | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 用户信息
const cashier = reactive<Cashier>({
cashierId: 0,
outTradeNo: '',
buyerId: '',
payType: '',
code: '',
amount: undefined,
totalAmount: undefined,
feeAmount: undefined,
receiptAmount: undefined,
settleAmount: undefined,
orderRemark: '',
orderStatus: '',
payTime: '',
merchantName: '',
mobile: '',
msg: '',
tenantId: 2
});
// 请求状态
const loading = ref(true);
const { resetFields } = useForm(cashier);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
/* 打开外部链接 */
// const openUrl = (record) => {
// window.open(record.panel);
// };
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignObject(cashier, props.data);
}
} else {
resetFields();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 100px;
}
</style>

65
src/views/apps/cashier/components/cashier-search.vue Normal file
View File

@@ -0,0 +1,65 @@
<!-- 搜索表单 -->
<template>
<a-form
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="订单号">
<a-input
v-model:value.trim="where.outTradeNo"
placeholder="请输入订单号"
allow-clear
@pressEnter="search"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="手机号码">
<a-input
v-model:value.trim="where.mobile"
placeholder="请输入顾客手机号码"
allow-clear
@pressEnter="search"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="search">查询</a-button>
<a-button @click="reset">重置</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
<script lang="ts" setup>
import useSearch from '@/utils/use-search';
import type { CashierParam } from '@/api/apps/cashier/model';
const emit = defineEmits<{
(e: 'search', where?: CashierParam): void;
}>();
// 表单数据
const { where, resetFields } = useSearch<CashierParam>({
outTradeNo: '',
merchantName: '',
mobile: ''
});
/* 搜索 */
const search = () => {
emit('search', where);
};
/* 重置 */
const reset = () => {
resetFields();
search();
};
</script>

45
src/views/apps/cashier/components/status-select.vue Normal file
View File

@@ -0,0 +1,45 @@
<!-- 角色选择下拉框 -->
<template>
<a-select
show-search
optionFilterProp="label"
:options="data"
allow-clear
:value="value"
:placeholder="placeholder"
@update:value="updateValue"
@blur="onBlur"
/>
</template>
<script lang="ts" setup>
import { getDictionaryOptions } from '@/utils/common';
const emit = defineEmits<{
(e: 'update:value', value: string): void;
(e: 'blur'): void;
}>();
withDefaults(
defineProps<{
value?: string;
placeholder?: string;
}>(),
{
placeholder: '请选择状态'
}
);
// 字典数据
const data = getDictionaryOptions('status');
/* 更新选中数据 */
const updateValue = (value: string) => {
emit('update:value', value);
};
/* 失去焦点 */
const onBlur = () => {
emit('blur');
};
</script>

238
src/views/apps/cashier/index.vue Normal file
View File

@@ -0,0 +1,238 @@
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 搜索表单 -->
<cashier-search @search="reload" />
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="cashierId"
:columns="columns"
:datasource="datasource"
v-model:selection="selection"
:scroll="{ x: 800 }"
>
<template #toolbar>
<a-space>
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
<template #icon>
<plus-outlined />
</template>
<span>新建</span>
</a-button>
<a-button
danger
type="primary"
class="ele-btn-icon"
@click="removeBatch"
>
<template #icon>
<delete-outlined />
</template>
<span>删除</span>
</a-button>
</a-space>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'outTradeNo'">
<a-tooltip title="查看详情">
<a href="#" @click="openInfo(record)">{{ record.outTradeNo }}</a>
</a-tooltip>
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === '0'" color="green">正常</a-tag>
<a-tag v-if="record.status === '1'" color="red">禁用</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openInfo(record)">详情</a>
<a-divider type="vertical" />
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<cashier-edit v-model:visible="showEdit" :data="current" @done="reload" />
<!-- 用户详情 -->
<cashier-info v-model:visible="showInfo" :data="current" @done="reload" />
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import {
PlusOutlined,
DeleteOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import CashierSearch from './components/cashier-search.vue';
import CashierEdit from './components/cashier-edit.vue';
import CashierInfo from './components/cashier-info.vue';
import {
pageCashier,
removeCashier,
removeBatchCashier
} from '@/api/apps/cashier';
import type { Cashier, CashierParam } from '@/api/apps/cashier/model';
import { toDateString } from 'ele-admin-pro';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 是否显示资产详情
const showInfo = ref(false);
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '商户名称',
dataIndex: 'merchantName',
key: 'status',
sorter: true
},
{
title: '设备ID',
dataIndex: 'merchantCode',
key: 'merchantCode',
width: 280,
ellipsis: true,
sorter: true
},
{
title: '支付方式',
dataIndex: 'payType'
},
{
title: '支付金额',
dataIndex: 'totalAmount'
},
{
title: '备注',
dataIndex: 'orderRemark'
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
ellipsis: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center',
hideInSetting: true
}
]);
// 表格选中数据
const selection = ref<Cashier[]>([]);
// 当前编辑数据
const current = ref<Cashier | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 表格数据源
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
return pageCashier({ ...where, ...orders, page, limit });
};
/* 搜索 */
const reload = (where?: CashierParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: Cashier) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
const openInfo = (row?: Cashier) => {
current.value = row ?? null;
showInfo.value = true;
};
/* 打开外部链接 */
const openUrl = (record) => {
window.open(record.panel);
};
/* 删除单个 */
const remove = (row: Cashier) => {
const hide = message.loading('请求中..', 0);
removeCashier(row.cashierId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchCashier(selection.value.map((d) => d.cashierId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
</script>
<script lang="ts">
export default {
name: 'Cashier'
};
</script>

183
src/views/apps/docs-proview/components/docs-edit.vue Normal file
View File

@@ -0,0 +1,183 @@
<!-- 文档编辑弹窗 -->
<template>
<ele-modal
:width="620"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '修改文档' : '添加文档'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
:label-col="{ md: { span: 7 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 17 }, sm: { span: 24 } }"
>
<a-row :gutter="16">
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="上级目录" v-bind="validateInfos.parentId">
<docs-select
:data="docs"
placeholder="请选择上级目录"
v-model:value="form.parentId"
/>
</a-form-item>
<a-form-item label="文档标题" v-bind="validateInfos.title">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入文档标题"
v-model:value="form.title"
/>
</a-form-item>
<a-form-item label="排序号" v-bind="validateInfos.sortNumber">
<a-input-number
:min="0"
:max="99999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
</a-col>
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="备注">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入备注"
v-model:value="form.comments"
/>
</a-form-item>
</a-col>
<div style="margin-bottom: 22px">
<a-divider />
</div>
</a-row>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import DocsSelect from './docs-select.vue';
import { addDocs, updateDocs } from '@/api/cms/docs';
import type { Docs } from '@/api/cms/docs/model';
const useForm = Form.useForm;
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Docs | null;
// 文档id
docsId?: number;
// 全部文档
docs: Docs[];
}>();
// 是否是修改
const isUpdate = ref(false);
// 提交状态
const loading = ref(false);
// 表单数据
const form = reactive<Docs>({
// 文档id
docsId: 0,
// 文档标题
title: '',
// 上级文档
parentId: 0,
// 封面图
avatar: '',
// 用户ID
userId: '',
// 所属门店ID
shopId: '',
// 排序
sortNumber: 100,
// 备注
comments: '',
// 内容
content: ''
});
// 表单验证规则
const rules = reactive({
title: [
{
required: true,
message: '请输入文档标题',
type: 'string',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
message: '请输入排序号',
type: 'number',
trigger: 'blur'
}
]
});
const { resetFields, validate, validateInfos } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
const docsData = {
...form,
parentId: form.parentId || 0
};
const saveOrUpdate = isUpdate.value ? updateDocs : addDocs;
saveOrUpdate(docsData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
assignObject(form, props.data);
isUpdate.value = true;
} else {
form.parentId = props.docsId;
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>

39
src/views/apps/docs-proview/components/docs-select.vue Normal file
View File

@@ -0,0 +1,39 @@
<!-- 目录选择下拉框 -->
<template>
<a-tree-select
allow-clear
tree-default-expand-all
:placeholder="placeholder"
:value="value || undefined"
:tree-data="data"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
@update:value="updateValue"
/>
</template>
<script lang="ts" setup>
import type { Docs } from '@/api/cms/docs/model';
const emit = defineEmits<{
(e: 'update:value', value?: number): void;
}>();
withDefaults(
defineProps<{
// 选中的数据(v-modal)
value?: number;
// 提示信息
placeholder?: string;
// 目录数据
data: Docs[];
}>(),
{
placeholder: '请选择目录'
}
);
/* 更新选中数据 */
const updateValue = (value?: number) => {
emit('update:value', value);
};
</script>

67
src/views/apps/docs-proview/content.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<div class="page">
<a-card :bordered="false">
<!-- 编辑器 -->
<byte-md-viewer :value="content" :plugins="plugins" />
</a-card>
</div>
</template>
<script lang="ts" setup>
import 'bytemd/dist/index.min.css';
import { computed, ref, watch } from 'vue';
import 'github-markdown-css/github-markdown-light.css';
import type { Docs } from '@/api/cms/docs/model';
import ByteMdViewer from '@/components/ByteMdViewer/index.vue';
// import { openUrl } from '@/utils/common';
// 链接、删除线、复选框、表格等的插件
import gfm from '@bytemd/plugin-gfm';
import highlight from '@bytemd/plugin-highlight';
// 内容样式，这里用的 github 的 markdown 主题
import 'github-markdown-css/github-markdown-light.css';
// 引入高亮css
import 'highlight.js/styles/vs.css';
// import { getDocsContent } from '@/api/cms/docs-content';
import { useUserStore } from '@/store/modules/user';
const props = defineProps<{
// 文档 id
current?: Docs | null;
}>();
// 插件
const plugins = ref([gfm(), highlight()]);
// 提交状态
const loading = ref(false);
// 编辑器内容，双向绑定
const content = ref('');
// const docsContentId = ref(0);
// 是否是修改
// const isUpdate = ref(false);
// 当前用户信息
const userStore = useUserStore();
const loginUser = computed(() => userStore.info ?? {});
/* 搜索 */
// const reload = () => {
// getDocsContent(Number(props.current?.docsId))
// .then((res) => {
// content.value = String(res.content);
// docsContentId.value = Number(res.docsContentId);
// isUpdate.value = true;
// })
// .catch(() => {
// loading.value = false;
// content.value = '';
// isUpdate.value = false;
// });
// };
// 监听文档 id 变化
watch(
() => props.current?.docsId,
() => {
content.value = String(props.current?.content);
}
);
</script>

166
src/views/apps/docs-proview/index.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<div class="ele-body">
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-split-layout
width="266px"
allow-collapse
:right-style="{ overflow: 'hidden' }"
:style="{ minHeight: 'calc(100vh - 152px)' }"
>
<div>
<ele-toolbar theme="default">
<a-space :size="10">
<a-input-search
allow-clear
placeholder="搜索关键词"
v-model:value="searchText"
@pressEnter="search"
@search="search"
/>
</a-space>
</ele-toolbar>
<div class="ele-border-split sys-docs-list">
<a-tree
:tree-data="data"
v-model:expanded-keys="expandedRowKeys"
v-model:selected-keys="selectedRowKeys"
@select="onTreeSelect"
/>
</div>
</div>
<template #content>
<content :data="data" :current="current" @done="query"></content>
</template>
</ele-split-layout>
</a-card>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, unref } from 'vue';
import { message } from 'ant-design-vue';
import { eachTreeData, toTreeData } from 'ele-admin-pro';
import Content from './content.vue';
import { listDocs } from '@/api/cms/docs';
import type { Docs, DocsParam } from '@/api/cms/docs/model';
import useSearch from '@/utils/use-search';
import { useRouter } from 'vue-router';
const ROUTE_PATH = '/apps/docs-proview';
const { currentRoute } = useRouter();
// 加载状态
const loading = ref(true);
// 树形数据
const data = ref<Docs[]>([]);
// 树展开的key
const expandedRowKeys = ref<number[]>([]);
// 树选中的key
const selectedRowKeys = ref<number[]>([]);
// 选中数据
const current = ref<Docs | null>(null);
// 默认文档ID
const docsId = ref(28);
// 搜索内容
const searchText = ref('');
// 表单数据
const { where } = useSearch<DocsParam>({
title: ''
});
/* 搜索 */
const search = () => {
where.title = searchText.value;
getDocs();
};
/* 查询 */
const getDocs = () => {
loading.value = true;
listDocs(where)
.then((list) => {
loading.value = false;
const eks: number[] = [];
list.forEach((d) => {
d.key = d.docsId;
d.value = d.docsId;
if (typeof d.docsId === 'number') {
eks.push(d.docsId);
}
// 查找当前文档
if (d.docsId === docsId.value) {
current.value = d;
selectedRowKeys.value = [d.docsId];
}
});
expandedRowKeys.value = eks;
data.value = toTreeData({
data: list,
idField: 'docsId',
parentIdField: 'parentId'
});
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
};
/* 选择数据 */
const onTreeSelect = () => {
eachTreeData(data.value, (d) => {
if (
typeof d.docsId === 'number' &&
selectedRowKeys.value.includes(d.docsId)
) {
current.value = d;
return false;
}
});
};
// /* 选择数据 */
// const setKey = (item) => {
// current.value = item;
// selectedRowKeys.value = [item.docsId];
// const path = '/dashboard/docs';
// nextTick(() => {
// push({
// path,
// query: item ? { id: item.docsId } : undefined
// });
// });
// };
watch(
currentRoute,
(route) => {
const { fullPath } = unref(route);
console.log(ROUTE_PATH);
if (!fullPath.startsWith(ROUTE_PATH)) {
return;
}
const { query } = unref(currentRoute);
if (query.id) {
docsId.value = Number(query.id);
}
getDocs();
},
{ immediate: true }
);
</script>
<script lang="ts">
export default {
name: 'Docs'
};
</script>
<style lang="less" scoped>
.sys-docs-list {
padding: 12px 6px;
height: calc(100vh - 242px);
border-width: 1px;
border-style: solid;
overflow: auto;
}
</style>

337
src/views/apps/equipment/alarm/components/edit.vue Normal file
View File

@@ -0,0 +1,337 @@
<!-- 用户编辑弹窗 -->
<template>
<a-drawer
:width="600"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑' : '新建'"
:body-style="{ paddingBottom: '8px' }"
:footer-style="{ textAlign: 'right' }"
@update:visible="updateVisible"
:maskClosable="isUpdate"
@ok="save"
>
<a-form
ref="formRef"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
:model="form"
:rules="rules"
>
<a-form-item label="选择设备" name="equipmentCode">
<EquipmentSelect
dict-code="equipmentCode"
placeholder="请选择设备"
v-model:value="form.equipmentCode"
/>
</a-form-item>
<a-form-item label="报警类型" name="alarmType">
<DictSelect
dict-code="alarmType"
v-model:value="form.alarmType"
placeholder="选择报警类型"
/>
</a-form-item>
<!-- <a-form-item label="上传图片" name="images">-->
<!-- <ele-image-upload-->
<!-- v-model:value="images"-->
<!-- :limit="1"-->
<!-- :drag="true"-->
<!-- :multiple="true"-->
<!-- :upload-handler="uploadHandler"-->
<!-- @upload="onUpload"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item label="备注" name="comments">-->
<!-- <a-textarea-->
<!-- :rows="4"-->
<!-- :maxlength="200"-->
<!-- placeholder="请输入备注"-->
<!-- v-model:value="form.comments"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item label="处理状态" name="status">-->
<!-- <a-radio-group v-model:value="form.status">-->
<!-- <a-radio :value="0">未处理</a-radio>-->
<!-- <a-radio :value="1">已处理</a-radio>-->
<!-- </a-radio-group>-->
<!-- </a-form-item>-->
</a-form>
<template #footer>
<a-space>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" @click="save">保存</a-button>
</a-space>
</template>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { EquipmentAlarm } from '@/api/apps/equipment/alarm/model';
import {
addEquipmentAlarm,
updateEquipmentAlarm
} from '@/api/apps/equipment/alarm';
import { FormInstance, Rule } from 'ant-design-vue/es/form';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { uploadFile } from '@/api/system/file';
import { FILE_SERVER } from '@/config/setting';
import useFormData from '@/utils/use-form-data';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import DictSelect from '@/components/DictSelect/index.vue';
import dayjs, { Dayjs } from 'dayjs';
// import MultiSpec from './MultiSpec.vue';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: EquipmentAlarm | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
const disabled = ref(false);
// 选择日期
const batteryDeliveryTime = ref<Dayjs>();
const ctiveTime = ref<Dayjs>();
// 提交状态
const loading = ref(false);
// 已上传数据
const images = ref<ItemType[]>([]);
const formRef = ref<FormInstance | null>(null);
// 选项卡位置
// const activeKey = ref('1');
// 编辑器内容，双向绑定
const content = ref<any>('');
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<EquipmentAlarm>({
id: undefined,
equipmentCode: undefined,
handleTime: undefined,
alarmType: undefined,
comments: '',
sortNumber: 100,
status: 0,
merchantCode: undefined
});
/* 上传事件 */
const uploadHandler = (file: File) => {
const item: ItemType = {
file,
uid: (file as any).uid,
name: file.name
};
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return;
}
if (file.size / 1024 / 1024 > 2) {
message.error('大小不能超过 2MB');
return;
}
onUpload(item);
};
// 上传文件
const onUpload = (item) => {
const { file } = item;
uploadFile(file)
.then((data) => {
images.value.push({
uid: data.id,
url: FILE_SERVER + data.path,
status: 'done'
});
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
equipmentCode: [
{
required: true,
message: '请选择设备',
type: 'string',
trigger: 'blur'
}
],
alarmType: [
{
required: true,
message: '请选择报警类型',
type: 'string',
trigger: 'blur'
}
]
// status: [
// {
// required: true,
// type: 'number',
// message: '请选择设备状态',
// trigger: 'blur'
// }
// ],
// sortNumber: [
// {
// required: true,
// type: 'number',
// message: '请输入排序号',
// trigger: 'blur'
// }
// ],
// images: [
// {
// required: true,
// type: 'string',
// message: '请选择设备图片',
// trigger: 'blur',
// validator: async (_rule: RuleObject, value: string) => {
// if (images.value.length == 0) {
// return Promise.reject('请上传设备图片');
// }
// return Promise.resolve();
// }
// }
// ],
// content: [
// {
// required: true,
// type: 'string',
// message: '请输入文章内容',
// trigger: 'blur',
// validator: async (_rule: RuleObject, value: string) => {
// if (content.value == '') {
// return Promise.reject('请输入文字内容');
// }
// return Promise.resolve();
// }
// }
// ]
});
/* 控制放店开关 */
const editStatus = () => {
if (form.status == 0) {
form.status = 1;
} else {
form.status = 0;
}
updateEquipmentAlarm(form)
.then(() => {
message.success('操作成功');
})
.catch((e) => {
message.error(e.message);
});
};
const onClose = () => {
updateVisible(false);
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
// 获取第一张图片作为封面图
images.value.map((d, i) => {
if (i === 0) {
form.image = d.url;
}
});
const equipmentAlarmForm = {
...form,
files: JSON.stringify(images.value),
content: content.value,
batteryDeliveryTime: batteryDeliveryTime.value?.format(
'YYYY-MM-DD HH:mm:ss'
),
ctiveTime: ctiveTime.value?.format('YYYY-MM-DD HH:mm:ss')
};
const saveOrUpdate = isUpdate.value
? updateEquipmentAlarm
: addEquipmentAlarm;
saveOrUpdate(equipmentAlarmForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data
});
if (props.data.batteryDeliveryTime) {
batteryDeliveryTime.value = dayjs(
props.data.batteryDeliveryTime,
'YYYY-MM-DD'
);
ctiveTime.value = dayjs(props.data.ctiveTime, 'YYYY-MM-DD');
} else {
batteryDeliveryTime.value = undefined;
ctiveTime.value = undefined;
}
// images.value = JSON.parse(String(props.data.files));
content.value = props.data.content;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

135
src/views/apps/equipment/alarm/components/search.vue Normal file
View File

@@ -0,0 +1,135 @@
<!-- 搜索表单 -->
<template>
<a-space>
<!-- <a-button-->
<!-- type="primary"-->
<!-- class="ele-btn-icon"-->
<!-- :v-role="`superAdmin`"-->
<!-- @click="add"-->
<!-- >-->
<!-- <template #icon>-->
<!-- <PlusOutlined />-->
<!-- </template>-->
<!-- <span>新建</span>-->
<!-- </a-button>-->
<!-- <a-button-->
<!-- danger-->
<!-- type="primary"-->
<!-- class="ele-btn-icon"-->
<!-- :v-role="`superAdmin`"-->
<!-- @click="removeBatch"-->
<!-- v-if="props.selection.length > 0"-->
<!-- >-->
<!-- <template #icon>-->
<!-- <DeleteOutlined />-->
<!-- </template>-->
<!-- <span>批量删除</span>-->
<!-- </a-button>-->
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入搜索关键词"
@search="search"
@pressEnter="search"
>
<template #addonBefore>
<a-select v-model:value="type" style="width: 120px; margin: -5px -12px">
<a-select-option value="equipmentCode">设备编号</a-select-option>
<a-select-option value="alarmType">报警类型</a-select-option>
</a-select>
</template>
</a-input-search>
<!-- <CustomerSelect-->
<!-- v-model:value="where.equipmentId"-->
<!-- :placeholder="`按设备筛选`"-->
<!-- @select="onSelect"-->
<!-- @clear="onClear"-->
<!-- />-->
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { EquipmentParam } from '@/api/apps/equipment/model';
// import CustomerSelect from '@/components/CustomerSelect/index.vue';
import { ref, watch } from 'vue';
import { EquipmentAlarmParam } from '@/api/apps/equipment/alarm/model';
const emit = defineEmits<{
(e: 'search', where?: EquipmentParam): void;
(e: 'add'): void;
(e: 'remove'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where, resetFields } = useSearch<EquipmentAlarmParam>({
id: undefined,
alarmType: '',
equipmentCode: ''
});
// 下来选项
const type = ref('equipmentCode');
// tabType
const listType = ref('all');
// 搜索内容
const searchText = ref('');
/* 搜索 */
const search = () => {
if (type.value == 'alarmType') {
where.alarmType = searchText.value;
where.equipmentCode = undefined;
}
if (type.value == 'equipmentCode') {
where.equipmentCode = searchText.value;
where.alarmType = undefined;
}
emit('search', where);
};
const handleTabs = (e) => {
listType.value = e.target.value;
if (listType.value == 'all') {
resetFields();
}
if (listType.value == 'onSale') {
where.status = 0;
}
if (listType.value == 'offSale') {
where.status = 1;
}
if (listType.value == 'soldOut') {
where.stockTotal = 0;
}
emit('search', where);
};
// 新增
const add = () => {
emit('add');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
/* 重置 */
const reset = () => {
resetFields();
search();
};
// 监听字典id变化
watch(
() => props.selection,
() => {}
);
</script>

250
src/views/apps/equipment/alarm/index.vue Normal file
View File

@@ -0,0 +1,250 @@
<template>
<div class="page">
<a-page-header :ghost="false" title="电池报警">
<div class="ele-text-secondary"> 电池报警记录。 </div>
</a-page-header>
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="id"
:columns="columns"
:height="tableHeight"
:datasource="datasource"
v-model:selection="selection"
:scroll="{ x: 800 }"
>
<template #toolbar>
<search
:selection="selection"
@search="reload"
@add="openEdit"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'equipmentCode'">
<a @click="openEdit(record)">{{ record.equipmentCode }}</a>
</template>
<template v-if="column.key === 'createTime'">
<a-tooltip :title="`${toDateString(record.createTime)}`">
{{ timeAgo(record.createTime) }}
</a-tooltip>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<Edit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</div>
</template>
<!--suppress TypeScriptValidateTypes -->
<script lang="ts" setup>
import { timeAgo } from 'ele-admin-pro';
import { createVNode, computed, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import Edit from './components/edit.vue';
import {
pageEquipmentAlarm,
removeEquipmentAlarm,
removeBatchEquipmentAlarm
} from '@/api/apps/equipment/alarm';
import type {
EquipmentAlarm,
EquipmentAlarmParam
} from '@/api/apps/equipment/alarm/model';
import { Category } from '@/api/goods/category/model';
// import { getDictionaryOptions } from '@/utils/common';
// import { useUserStore } from '@/store/modules/user';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 当前用户信息
// const brand = getDictionaryOptions('serverBrand');
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '设备编号',
dataIndex: 'equipmentCode',
key: 'equipmentCode',
fixed: 'left'
},
{
title: '所属商户',
dataIndex: 'merchantName',
sorter: true,
ellipsis: true
},
{
title: '报警类型',
dataIndex: 'alarmType',
key: 'alarmType',
ellipsis: true
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
ellipsis: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center',
hideInSetting: true
}
]);
// 表格选中数据
const selection = ref<EquipmentAlarm[]>([]);
// 当前编辑数据
const current = ref<EquipmentAlarm | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 树形数据
// const data = ref<Category[]>([]);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.brand = filters.brand;
}
return pageEquipmentAlarm({ ...where, ...orders, page, limit });
};
/* 搜索 */
const reload = (where?: EquipmentAlarmParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
// 搜索是否展开
const searchExpand = ref(false);
// 表格固定高度
const fixedHeight = ref(false);
// 表格高度
const tableHeight = computed(() => {
return fixedHeight.value
? searchExpand.value
? 'calc(100vh - 618px)'
: 'calc(100vh - 562px)'
: void 0;
});
/* 打开编辑弹窗 */
const openEdit = (row?: EquipmentAlarm) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
// const openInfo = (row?: EquipmentAlarm) => {
// current.value = row ?? null;
// showEdit.value = true;
// };
/* 删除单个 */
const remove = (row: EquipmentAlarm) => {
const hide = message.loading('请求中..', 0);
removeEquipmentAlarm(row.id)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchEquipmentAlarm(selection.value.map((d) => d.id))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
</script>
<script lang="ts">
export default {
name: 'EquipmentAlarmIndex'
};
</script>
<style lang="less" scoped>
// 文字超出隐藏(两行)
// 需要设置文字容器的宽度
.twoline-hide {
width: 320px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
</style>

338
src/views/apps/equipment/fault/components/edit.vue Normal file
View File

@@ -0,0 +1,338 @@
<!-- 用户编辑弹窗 -->
<template>
<a-drawer
:width="600"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑' : '新建'"
:body-style="{ paddingBottom: '8px' }"
:footer-style="{ textAlign: 'right' }"
@update:visible="updateVisible"
:maskClosable="isUpdate"
@ok="save"
>
<a-form
ref="formRef"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
:model="form"
:rules="rules"
>
<a-form-item label="选择设备" name="equipmentCode">
<EquipmentSelect
dict-code="equipmentCode"
placeholder="请选择设备"
v-model:value="form.equipmentCode"
/>
</a-form-item>
<a-form-item label="故障原因" name="faultType">
<DictSelect
dict-code="faultType"
v-model:value="form.faultType"
placeholder="选择故障原因"
/>
</a-form-item>
<!-- <a-form-item label="上传图片" name="images">-->
<!-- <ele-image-upload-->
<!-- v-model:value="images"-->
<!-- :limit="1"-->
<!-- :drag="true"-->
<!-- :multiple="true"-->
<!-- :upload-handler="uploadHandler"-->
<!-- @upload="onUpload"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="备注" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入备注"
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="处理状态" name="status">
<a-radio-group v-model:value="form.status">
<a-radio :value="0">未处理</a-radio>
<a-radio :value="1">已处理</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
<template #footer>
<a-space>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" @click="save">保存</a-button>
</a-space>
</template>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { EquipmentFault } from '@/api/apps/equipment/fault/model';
import {
addEquipmentFault,
updateEquipmentFault
} from '@/api/apps/equipment/fault';
import { FormInstance, Rule, RuleObject } from 'ant-design-vue/es/form';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { uploadFile } from '@/api/system/file';
import { FILE_SERVER } from '@/config/setting';
import useFormData from '@/utils/use-form-data';
import { Category } from '@/api/goods/category/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import DictSelect from '@/components/DictSelect/index.vue';
import dayjs, { Dayjs } from 'dayjs';
// import MultiSpec from './MultiSpec.vue';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: EquipmentFault | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
const disabled = ref(false);
// 选择日期
const batteryDeliveryTime = ref<Dayjs>();
const ctiveTime = ref<Dayjs>();
// 提交状态
const loading = ref(false);
// 已上传数据
const images = ref<ItemType[]>([]);
const formRef = ref<FormInstance | null>(null);
// 选项卡位置
// const activeKey = ref('1');
// 编辑器内容，双向绑定
const content = ref<any>('');
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<EquipmentFault>({
id: undefined,
equipmentCode: undefined,
handleTime: undefined,
faultType: undefined,
comments: '',
sortNumber: 100,
status: 0,
merchantCode: undefined
});
/* 上传事件 */
const uploadHandler = (file: File) => {
const item: ItemType = {
file,
uid: (file as any).uid,
name: file.name
};
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return;
}
if (file.size / 1024 / 1024 > 2) {
message.error('大小不能超过 2MB');
return;
}
onUpload(item);
};
// 上传文件
const onUpload = (item) => {
const { file } = item;
uploadFile(file)
.then((data) => {
images.value.push({
uid: data.id,
url: FILE_SERVER + data.path,
status: 'done'
});
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
equipmentCode: [
{
required: true,
message: '请选择设备',
type: 'string',
trigger: 'blur'
}
],
faultType: [
{
required: true,
message: '请选择故障原因',
type: 'string',
trigger: 'blur'
}
],
status: [
{
required: true,
type: 'number',
message: '请选择设备状态',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
type: 'number',
message: '请输入排序号',
trigger: 'blur'
}
],
// images: [
// {
// required: true,
// type: 'string',
// message: '请选择设备图片',
// trigger: 'blur',
// validator: async (_rule: RuleObject, value: string) => {
// if (images.value.length == 0) {
// return Promise.reject('请上传设备图片');
// }
// return Promise.resolve();
// }
// }
// ],
content: [
{
required: true,
type: 'string',
message: '请输入文章内容',
trigger: 'blur',
validator: async (_rule: RuleObject, value: string) => {
if (content.value == '') {
return Promise.reject('请输入文字内容');
}
return Promise.resolve();
}
}
]
});
/* 控制放店开关 */
const editStatus = () => {
if (form.status == 0) {
form.status = 1;
} else {
form.status = 0;
}
updateEquipmentFault(form)
.then(() => {
message.success('操作成功');
})
.catch((e) => {
message.error(e.message);
});
};
const onClose = () => {
updateVisible(false);
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
// 获取第一张图片作为封面图
images.value.map((d, i) => {
if (i === 0) {
form.image = d.url;
}
});
const equipmentFaultForm = {
...form,
files: JSON.stringify(images.value),
content: content.value,
batteryDeliveryTime: batteryDeliveryTime.value?.format(
'YYYY-MM-DD HH:mm:ss'
),
ctiveTime: ctiveTime.value?.format('YYYY-MM-DD HH:mm:ss')
};
const saveOrUpdate = isUpdate.value
? updateEquipmentFault
: addEquipmentFault;
saveOrUpdate(equipmentFaultForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data
});
if (props.data.batteryDeliveryTime) {
batteryDeliveryTime.value = dayjs(
props.data.batteryDeliveryTime,
'YYYY-MM-DD'
);
ctiveTime.value = dayjs(props.data.ctiveTime, 'YYYY-MM-DD');
} else {
batteryDeliveryTime.value = undefined;
ctiveTime.value = undefined;
}
// images.value = JSON.parse(String(props.data.files));
content.value = props.data.content;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

141
src/views/apps/equipment/fault/components/search.vue Normal file
View File

@@ -0,0 +1,141 @@
<!-- 搜索表单 -->
<template>
<a-space>
<a-button
type="primary"
class="ele-btn-icon"
v-permission="'apps:equipment:save'"
@click="add"
>
<template #icon>
<PlusOutlined />
</template>
<span>新建</span>
</a-button>
<a-button
danger
type="primary"
class="ele-btn-icon"
:v-role="`dev`"
@click="removeBatch"
v-if="props.selection.length > 0"
>
<template #icon>
<DeleteOutlined />
</template>
<span>批量删除</span>
</a-button>
<!-- <a-radio-group v-model:value="listType" @change="handleTabs">-->
<!-- <a-radio-button value="all">全部</a-radio-button>-->
<!-- <a-radio-button value="onSale">出售中</a-radio-button>-->
<!-- <a-radio-button value="offSale">已下架</a-radio-button>-->
<!-- <a-radio-button value="soldOut">已售罄</a-radio-button>-->
<!-- </a-radio-group>-->
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入搜索关键词"
@search="search"
@pressEnter="search"
>
<template #addonBefore>
<a-select v-model:value="type" style="width: 120px; margin: -5px -12px">
<a-select-option value="equipmentCode">设备编号</a-select-option>
<a-select-option value="faultType">故意原因</a-select-option>
</a-select>
</template>
</a-input-search>
<!-- <CustomerSelect-->
<!-- v-model:value="where.equipmentId"-->
<!-- :placeholder="`按设备筛选`"-->
<!-- @select="onSelect"-->
<!-- @clear="onClear"-->
<!-- />-->
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { EquipmentParam } from '@/api/apps/equipment/model';
// import CustomerSelect from '@/components/CustomerSelect/index.vue';
import { ref, watch } from 'vue';
import { EquipmentFaultParam } from '@/api/apps/equipment/fault/model';
const emit = defineEmits<{
(e: 'search', where?: EquipmentParam): void;
(e: 'add'): void;
(e: 'remove'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where, resetFields } = useSearch<EquipmentFaultParam>({
id: undefined,
faultType: '',
equipmentCode: ''
});
// 下来选项
const type = ref('equipmentCode');
// tabType
const listType = ref('all');
// 搜索内容
const searchText = ref('');
/* 搜索 */
const search = () => {
if (type.value == 'faultType') {
where.faultType = searchText.value;
where.equipmentCode = undefined;
}
if (type.value == 'equipmentCode') {
where.equipmentCode = searchText.value;
where.faultType = undefined;
}
emit('search', where);
};
// const handleTabs = (e) => {
// listType.value = e.target.value;
// if (listType.value == 'all') {
// resetFields();
// }
// if (listType.value == 'onSale') {
// where.status = 0;
// }
// if (listType.value == 'offSale') {
// where.status = 1;
// }
// if (listType.value == 'soldOut') {
// where.stockTotal = 0;
// }
// emit('search', where);
// };
// 新增
const add = () => {
emit('add');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
/* 重置 */
// const reset = () => {
// resetFields();
// search();
// };
// 监听字典id变化
watch(
() => props.selection,
() => {}
);
</script>

290
src/views/apps/equipment/fault/index.vue Normal file
View File

@@ -0,0 +1,290 @@
<template>
<div class="page">
<a-page-header :ghost="false" title="故障电池">
<div class="ele-text-secondary"> 故障电池上报记录。 </div>
</a-page-header>
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="id"
:columns="columns"
:height="tableHeight"
:datasource="datasource"
v-model:selection="selection"
:scroll="{ x: 800 }"
>
<template #toolbar>
<search
:selection="selection"
@search="reload"
@add="openEdit"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="80" />
</template>
<template v-if="column.key === 'equipmentCode'">
<a @click="openEdit(record)">{{ record.equipmentCode }}</a>
</template>
<template v-if="column.key === 'equipmentFaultName'">
{{ record.equipmentFaultName }}
</template>
<template v-if="column.key === 'isOnline'">
<a-tag v-if="record.status === 0" color="green">正常</a-tag>
<a-tag v-if="record.status === 1" color="orange">异常</a-tag>
</template>
<template v-if="column.key === 'comments'">
<a-tooltip :title="record.comments" placement="topLeft">
{{ record.comments }}
</a-tooltip>
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="red">未处理</a-tag>
<a-tag v-if="record.status === 1" color="green">已处理</a-tag>
</template>
<template v-if="column.key === 'createTime'">
<a-tooltip :title="`${toDateString(record.createTime)}`">
{{ timeAgo(record.createTime) }}
</a-tooltip>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<Edit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</div>
</template>
<!--suppress TypeScriptValidateTypes -->
<script lang="ts" setup>
import { timeAgo } from 'ele-admin-pro';
import { createVNode, computed, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import Edit from './components/edit.vue';
import {
pageEquipmentFault,
removeEquipmentFault,
removeBatchEquipmentFault
} from '@/api/apps/equipment/fault';
import type {
EquipmentFault,
EquipmentFaultParam
} from '@/api/apps/equipment/fault/model';
import { Category } from '@/api/goods/category/model';
// import { getDictionaryOptions } from '@/utils/common';
// import { useUserStore } from '@/store/modules/user';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 当前用户信息
// const brand = getDictionaryOptions('serverBrand');
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '设备编号',
dataIndex: 'equipmentCode',
key: 'equipmentCode',
width: 160,
fixed: 'left'
},
{
title: '所属商户',
dataIndex: 'merchantName',
sorter: true,
ellipsis: true
},
{
title: '故障原因',
dataIndex: 'faultType',
key: 'faultType',
ellipsis: true
},
{
title: '备注',
dataIndex: 'comments',
key: 'comments',
width: 380,
ellipsis: true
},
{
title: '处理状态',
dataIndex: 'status',
key: 'status',
sorter: true
},
{
title: '处理时间',
dataIndex: 'handleTime',
key: 'handleTime',
sorter: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
ellipsis: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center',
hideInSetting: true
}
]);
// 表格选中数据
const selection = ref<EquipmentFault[]>([]);
// 当前编辑数据
const current = ref<EquipmentFault | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 树形数据
const data = ref<Category[]>([]);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.brand = filters.brand;
}
return pageEquipmentFault({ ...where, ...orders, page, limit });
};
/* 搜索 */
const reload = (where?: EquipmentFaultParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
// 搜索是否展开
const searchExpand = ref(false);
// 表格固定高度
const fixedHeight = ref(false);
// 表格高度
const tableHeight = computed(() => {
return fixedHeight.value
? searchExpand.value
? 'calc(100vh - 618px)'
: 'calc(100vh - 562px)'
: void 0;
});
/* 打开编辑弹窗 */
const openEdit = (row?: EquipmentFault) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
const openInfo = (row?: EquipmentFault) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 删除单个 */
const remove = (row: EquipmentFault) => {
const hide = message.loading('请求中..', 0);
removeEquipmentFault(row.id)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchEquipmentFault(selection.value.map((d) => d.id))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
</script>
<script lang="ts">
export default {
name: 'EquipmentFaultIndex'
};
</script>
<style lang="less" scoped>
// 文字超出隐藏(两行)
// 需要设置文字容器的宽度
.twoline-hide {
width: 320px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
</style>

39
src/views/apps/equipment/goods/components/category-select.vue Normal file
View File

@@ -0,0 +1,39 @@
<!-- 目录选择下拉框 -->
<template>
<a-tree-select
allow-clear
tree-default-expand-all
:placeholder="placeholder"
:value="value || undefined"
:tree-data="data"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
@update:value="updateValue"
/>
</template>
<script lang="ts" setup>
import type { Equipment } from '@/api/apps/equipment/model';
const emit = defineEmits<{
(e: 'update:value', value?: number): void;
}>();
withDefaults(
defineProps<{
// 选中的数据(v-modal)
value?: number;
// 提示信息
placeholder?: string;
// 文章分类
data: Equipment[];
}>(),
{
placeholder: '请选择上级分类'
}
);
/* 更新选中数据 */
const updateValue = (value?: number) => {
emit('update:value', value);
};
</script>

713
src/views/apps/equipment/goods/components/equipment-goods-edit.vue Normal file
View File

@@ -0,0 +1,713 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="880"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑商品' : '添加商品'"
:body-style="{ paddingBottom: '8px' }"
:footer-style="{ textAlign: 'right' }"
@update:visible="updateVisible"
:maskClosable="isUpdate"
@ok="save"
>
<a-form
ref="formRef"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
:model="form"
:rules="rules"
>
<a-row :gutter="16">
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="商品下单方式" name="equipmentCategory">
<DictSelect
dict-code="equipmentCategory"
:disabled="isUpdate"
placeholder="请选择商品下单方式"
v-model:value="form.equipmentCategory"
/>
</a-form-item>
<a-form-item label="所属商户" name="merchantCode">
<MerchantSelect
dict-code="merchantCode"
placeholder="请选择所属商户"
v-model:value="form.merchantCode"
/>
</a-form-item>
<!-- 销售 -->
<template v-if="form.equipmentCategory === '10'">
<a-form-item label="销售价格" name="batteryPrice">
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.batteryPrice"
/>
</a-form-item>
</template>
<!-- 分期 -->
<template v-if="form.equipmentCategory === '20'">
<a-form-item label="销售价格" name="batteryPrice">
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.batteryPrice"
/>
</a-form-item>
<a-form-item label="首付款" name="downPayment">
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.downPayment"
/>
</a-form-item>
<a-form-item label="分期期数" name="periods">
<a-input-number
:min="0"
style="width: 200px"
v-model:value="form.periods"
/>
</a-form-item>
<a-form-item label="每期还款" name="repayment">
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.repayment"
/>
</a-form-item>
<a-form-item label="手续费" name="serviceCharges">
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.serviceCharges"
/>
</a-form-item>
</template>
<!-- 以租代购 -->
<template v-if="form.equipmentCategory === '30'">
<a-form-item label="商品总价" name="batteryPrice">
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.batteryPrice"
/>
</a-form-item>
<a-form-item label="分期方式" name="periodsType">
<a-radio-group v-model:value="form.periodsType">
<a-radio :value="10">按周</a-radio>
<a-radio :value="20">按月</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="分期期数" name="periods">
<a-input-number
:min="0"
style="width: 200px"
v-model:value="form.periods"
/>
</a-form-item>
<a-form-item label="设备租金" name="batteryRent">
<a-input-number
:min="0.01"
:precision="2"
style="width: 200px"
v-model:value="form.batteryRent"
/>
</a-form-item>
<a-form-item label="设备押金" name="batteryDeposit">
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.batteryDeposit"
/>
</a-form-item>
<a-form-item label="设备保险" name="batteryInsurance">
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.batteryInsurance"
/>
</a-form-item>
</template>
<!-- 租赁 -->
<template v-if="form.equipmentCategory === '40'">
<a-form-item label="设备租金" name="batteryRent">
<a-input-number
:min="0.01"
:precision="2"
style="width: 200px"
v-model:value="form.batteryRent"
/>
</a-form-item>
<a-form-item label="设备押金" name="batteryDeposit">
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.batteryDeposit"
/>
</a-form-item>
<a-form-item label="设备保险" name="batteryInsurance">
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.batteryInsurance"
/>
</a-form-item>
</template>
</a-col>
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="设备名称" name="goodsName">
<DictSelect
dict-code="equipmentName"
placeholder="请选择设备"
v-model:value="form.goodsName"
/>
</a-form-item>
<a-form-item label="电池型号" name="batteryModel">
<DictSelect
dict-code="equipmentModel"
placeholder="请选择电池型号"
v-model:value="form.batteryModel"
/>
</a-form-item>
<a-form-item label="商品库存" name="stockTotal">
<a-input-number
:min="0"
style="width: 200px"
v-model:value="form.stockTotal"
/>
</a-form-item>
<a-form-item label="商品卖点" name="sellingPoint">
<a-input v-model:value="form.sellingPoint" />
</a-form-item>
</a-col>
</a-row>
<a-form-item label="设备图片" name="images">
<ele-image-upload
v-model:value="images"
:limit="1"
:drag="true"
:upload-handler="uploadHandler"
@upload="onUpload"
/>
</a-form-item>
</a-form>
<template #footer>
<a-space>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" @click="save">保存</a-button>
</a-space>
</template>
<!-- <a-tabs v-model:activeKey="activeKey" type="card">-->
<!-- <a-tab-pane key="1" tab="基本信息" />-->
<!-- <a-tab-pane key="2" tab="设备详情">-->
<!-- <a-form-->
<!-- ref="formRef"-->
<!-- :label-col="{ md: { span: 8 }, sm: { span: 24 } }"-->
<!-- :wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"-->
<!-- layout="vertical"-->
<!-- :model="form"-->
<!-- :rules="rules"-->
<!-- >-->
<!-- <a-form-item label="" name="content">-->
<!-- &lt;!&ndash; 编辑器 &ndash;&gt;-->
<!-- <tinymce-editor-->
<!-- v-model:value="content"-->
<!-- :disabled="disabled"-->
<!-- :init="config"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-form>-->
<!-- </a-tab-pane>-->
<!-- </a-tabs>-->
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { EquipmentGoods } from '@/api/apps/equipment/goods/model';
import {
addEquipmentGoods,
updateEquipmentGoods
} from '@/api/apps/equipment/goods';
import { FormInstance, Rule, RuleObject } from 'ant-design-vue/es/form';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { uploadFile } from '@/api/system/file';
import { FILE_SERVER } from '@/config/setting';
import useFormData from '@/utils/use-form-data';
import TinymceEditor from '@/components/TinymceEditor/index.vue';
// import { Category } from '@/api/goods/category/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import DictSelect from '@/components/DictSelect/index.vue';
import MerchantSelect from '@/components/MerchantSelect/index.vue';
// import { createCode } from '@/utils/common';
import dayjs, { Dayjs } from 'dayjs';
// import MultiSpec from './MultiSpec.vue';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: EquipmentGoods | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
const disabled = ref(false);
// 选择日期
const batteryDeliveryTime = ref<Dayjs>();
const ctiveTime = ref<Dayjs>();
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
// 提交状态
const loading = ref(false);
// 已上传数据
const images = ref<ItemType[]>([]);
const formRef = ref<FormInstance | null>(null);
// 选项卡位置
// const activeKey = ref('1');
// 编辑器内容，双向绑定
const content = ref<any>('');
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<EquipmentGoods>({
goodsId: 1,
goodsName: '',
equipmentCategory: undefined,
image: undefined,
qrcode: '',
batteryModel: undefined,
comments: '',
sortNumber: 100,
status: 0,
stockTotal: 0,
content: '',
sellingPoint: undefined,
merchantCode: undefined,
batteryRent: 0,
batteryDeposit: 0,
batteryInsurance: 0,
batteryPrice: 0,
userId: 0,
downPayment: 0,
periods: 0,
repayment: 0,
serviceCharges: 0,
periodsType: 0,
tenantId: Number(localStorage.getItem('tenantId'))
});
/* 上传事件 */
const uploadHandler = (file: File) => {
const item: ItemType = {
file,
uid: (file as any).uid,
name: file.name
};
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return;
}
if (file.size / 1024 / 1024 > 2) {
message.error('大小不能超过 2MB');
return;
}
onUpload(item);
};
// 上传文件
const onUpload = (item) => {
const { file } = item;
uploadFile(file)
.then((data) => {
images.value.push({
uid: data.id,
url: FILE_SERVER + data.path,
status: 'done'
});
form.image = FILE_SERVER + data.path;
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
// merchantCode: [
// {
// required: true,
// message: '请选择商户',
// type: 'string',
// trigger: 'blur'
// }
// ],
goodsName: [
{
required: true,
message: '请输入设备名称',
type: 'string',
trigger: 'blur'
}
],
batteryModel: [
{
required: true,
type: 'string',
message: '请选择电池型号',
trigger: 'blur'
}
],
batteryPrice: [
{
required: true,
message: '请输入销售价格',
type: 'number',
trigger: 'blur'
}
],
batteryRent: [
{
required: true,
message: '请输入租金金额',
type: 'number',
trigger: 'blur'
}
],
equipmentCategory: [
{
required: true,
type: 'string',
message: '请选择设备分类',
trigger: 'blur'
}
],
equipmentCode: [
{
required: true,
type: 'string',
message: '请填写设备编号',
trigger: 'blur'
}
],
isCtive: [
{
required: true,
type: 'string',
message: '请选择是否激活',
trigger: 'blur'
}
],
equipmentType: [
{
required: true,
type: 'number',
message: '请选择设备类型',
trigger: 'blur'
}
],
deliveryType: [
{
required: true,
type: 'number',
message: '请选择配送方式',
trigger: 'blur'
}
],
equipmentPriceMin: [
{
required: true,
type: 'number',
message: '请输入设备价格',
trigger: 'blur'
}
],
stockTotal: [
{
required: true,
type: 'number',
message: '请输入设备库存',
trigger: 'blur'
}
],
specType: [
{
required: true,
type: 'number',
message: '请选择规格类型',
trigger: 'blur'
}
],
deliveryId: [
{
required: true,
type: 'number',
message: '请选择运费模板',
trigger: 'blur'
}
],
status: [
{
required: true,
type: 'number',
message: '请选择设备状态',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
type: 'number',
message: '请输入排序号',
trigger: 'blur'
}
],
deductStockType: [
{
required: true,
type: 'number',
message: '请设置库存计算方式',
trigger: 'blur'
}
],
purchaseLimit: [
{
required: true,
type: 'number',
message: '请设置是否限购',
trigger: 'blur'
}
],
// images: [
// {
// required: true,
// type: 'string',
// message: '请选择设备图片',
// trigger: 'blur',
// validator: async (_rule: RuleObject, value: string) => {
// if (images.value.length == 0) {
// return Promise.reject('请上传设备图片');
// }
// return Promise.resolve();
// }
// }
// ],
customerId: [
{
required: true,
type: 'number',
message: '请选择客户'
}
],
linePriceMin: [
{
required: true,
type: 'number',
message: '请输入设备划线价',
trigger: 'blur'
}
],
content: [
{
required: true,
type: 'string',
message: '请输入文章内容',
trigger: 'blur',
validator: async (_rule: RuleObject, value: string) => {
if (content.value == '') {
return Promise.reject('请输入文字内容');
}
return Promise.resolve();
}
}
],
brand: [
{
required: true,
type: 'string',
message: '请选项设备厂商',
trigger: 'blur'
}
]
});
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
const config = ref({
height: 500,
// 自定义文件上传(这里使用把选择的文件转成 blob 演示)
file_picker_callback: (callback: any, _value: any, meta: any) => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
// 设定文件可选类型
if (meta.filetype === 'image') {
input.setAttribute('accept', 'image/*');
} else if (meta.filetype === 'media') {
input.setAttribute('accept', 'video/*');
}
input.onchange = () => {
const file = input.files?.[0];
if (!file) {
return;
}
if (meta.filetype === 'media') {
if (!file.type.startsWith('video/')) {
editorRef.value?.alert({ content: '只能选择视频文件' });
return;
}
}
if (file.size / 1024 / 1024 > 20) {
editorRef.value?.alert({ content: '大小不能超过 20MB' });
return;
}
const reader = new FileReader();
reader.onload = (e) => {
if (e.target?.result != null) {
const blob = new Blob([e.target.result], { type: file.type });
callback(URL.createObjectURL(blob));
}
};
reader.readAsArrayBuffer(file);
};
input.click();
}
});
/* 控制放店开关 */
const editStatus = () => {
if (form.status == 0) {
form.status = 1;
} else {
form.status = 0;
}
updateEquipmentGoods(form)
.then(() => {
message.success('操作成功');
})
.catch((e) => {
message.error(e.message);
});
};
const onClose = () => {
updateVisible(false);
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
// 获取第一张图片作为封面图
images.value.map((d, i) => {
if (i === 0) {
form.image = d.url;
}
});
const equipmentForm = {
...form,
files: JSON.stringify(images.value),
content: content.value,
batteryDeliveryTime: batteryDeliveryTime.value?.format(
'YYYY-MM-DD HH:mm:ss'
),
ctiveTime: ctiveTime.value?.format('YYYY-MM-DD HH:mm:ss')
};
const saveOrUpdate = isUpdate.value
? updateEquipmentGoods
: addEquipmentGoods;
saveOrUpdate(equipmentForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data
});
if (props.data.batteryDeliveryTime) {
batteryDeliveryTime.value = dayjs(
props.data.batteryDeliveryTime,
'YYYY-MM-DD'
);
ctiveTime.value = dayjs(props.data.ctiveTime, 'YYYY-MM-DD');
} else {
batteryDeliveryTime.value = undefined;
ctiveTime.value = undefined;
}
images.value = [];
images.value.push({
uid: 1,
url: props.data.image,
status: 'done'
});
content.value = props.data.content;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

145
src/views/apps/equipment/goods/components/search.vue Normal file
View File

@@ -0,0 +1,145 @@
<!-- 搜索表单 -->
<template>
<a-space>
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<PlusOutlined />
</template>
<span>新建</span>
</a-button>
<a-button
danger
type="primary"
class="ele-btn-icon"
:v-role="`dev`"
@click="removeBatch"
:disabled="props.selection.length === 0"
>
<template #icon>
<DeleteOutlined />
</template>
<span>批量删除</span>
</a-button>
<!-- <a-radio-group v-model:value="listType" @change="handleTabs">-->
<!-- <a-radio-button value="all">全部</a-radio-button>-->
<!-- <a-radio-button value="onSale">出售中</a-radio-button>-->
<!-- <a-radio-button value="offSale">已下架</a-radio-button>-->
<!-- <a-radio-button value="soldOut">已售罄</a-radio-button>-->
<!-- </a-radio-group>-->
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入搜索关键词"
@search="search"
@pressEnter="search"
>
<template #addonBefore>
<a-select v-model:value="type" style="width: 120px; margin: -5px -12px">
<a-select-option value="equipmentCode">设备编号</a-select-option>
<a-select-option value="equipmentName">设备名称</a-select-option>
<a-select-option value="merchantCode">商户编号</a-select-option>
</a-select>
</template>
</a-input-search>
<!-- <CustomerSelect-->
<!-- v-model:value="where.equipmentId"-->
<!-- :placeholder="`按设备筛选`"-->
<!-- @select="onSelect"-->
<!-- @clear="onClear"-->
<!-- />-->
</a-space>
</template>
<script lang="ts" setup>
import {
PlusOutlined,
EditOutlined,
DeleteOutlined
} from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { EquipmentParam } from '@/api/apps/equipment/model';
// import CustomerSelect from '@/components/CustomerSelect/index.vue';
import { ref, watch } from 'vue';
const emit = defineEmits<{
(e: 'search', where?: EquipmentParam): void;
(e: 'add'): void;
(e: 'remove'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where } = useSearch<EquipmentParam>({
equipmentId: undefined,
equipmentName: '',
equipmentCode: '',
merchantCode: ''
});
// 下来选项
const type = ref('equipmentCode');
// tabType
// const listType = ref('all');
// 搜索内容
const searchText = ref('');
/* 搜索 */
const search = () => {
where.equipmentName = undefined;
where.equipmentCode = undefined;
where.merchantCode = undefined;
if (type.value == 'equipmentName') {
where.equipmentName = searchText.value;
}
if (type.value == 'equipmentCode') {
where.equipmentCode = searchText.value;
}
if (type.value == 'merchantCode') {
where.merchantCode = searchText.value;
}
emit('search', where);
};
// const handleTabs = (e) => {
// listType.value = e.target.value;
// if (listType.value == 'all') {
// resetFields();
// }
// if (listType.value == 'onSale') {
// where.status = 0;
// }
// if (listType.value == 'offSale') {
// where.status = 1;
// }
// if (listType.value == 'soldOut') {
// where.stockTotal = 0;
// }
// emit('search', where);
// };
// 新增
const add = () => {
emit('add');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
/* 重置 */
// const reset = () => {
// resetFields();
// search();
// };
// 监听字典id变化
watch(
() => props.selection,
() => {}
);
</script>

462
src/views/apps/equipment/goods/index.vue Normal file
View File

@@ -0,0 +1,462 @@
<template>
<div class="page">
<a-page-header :ghost="false" title="商品管理">
<div class="ele-text-secondary"> 商品管理，云芯威电池管理定制模块。 </div>
</a-page-header>
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="goodsId"
:columns="columns"
:height="tableHeight"
:datasource="datasource"
v-model:selection="selection"
:customRow="customRow"
>
<template #toolbar>
<search
:selection="selection"
@search="reload"
@add="openEdit"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'equipmentCode'">
<span>{{ record.equipmentCode }}</span>
</template>
<template v-if="column.key === 'goodsName'">
<a-image :src="record.image" :preview="false" :width="50" />
{{ record.goodsName }}
</template>
<template v-if="column.key === 'merchantName'">
<div style="display: flex; flex-direction: column">
<span>{{ record.merchantName }}</span>
<span class="ele-text-placeholder">
{{ record.merchantCode }}
</span>
</div>
</template>
<template v-if="column.key === 'qrcode'">
<a-image :src="record.qrcode" :width="50" />
</template>
<!-- <template v-if="column.key === 'batteryPrice'">-->
<!-- <strong class="ele-text-danger">-->
<!-- ￥{{ record.batteryPrice }}-->
<!-- </strong>-->
<!-- </template>-->
<template v-if="column.key === 'batteryDeposit'">
<strong class="ele-text-danger">
￥{{ record.batteryDeposit }}
</strong>
</template>
<template v-if="column.key === 'batteryInsurance'">
<strong class="ele-text-danger">
￥{{ record.batteryInsurance }}
</strong>
</template>
<template v-if="column.key === 'isOnline'">
<a-tag v-if="record.status === 0" color="green">正常</a-tag>
<a-tag v-if="record.status === 1" color="orange">异常</a-tag>
</template>
<template v-if="column.key === 'equipmentCategory'">
<a-tag
v-if="Number(record.equipmentCategory) === 10"
color="success"
>销售</a-tag
>
<a-tag v-if="Number(record.equipmentCategory) === 20" color="red"
>分期</a-tag
>
<a-tag
v-if="Number(record.equipmentCategory) === 30"
color="orange"
>以租代购</a-tag
>
<a-tag v-if="Number(record.equipmentCategory) === 40" color="blue"
>租赁</a-tag
>
</template>
<template v-if="column.key === 'comments'">
<a-tooltip :title="record.comments" placement="topLeft">
{{ record.comments }}
</a-tooltip>
</template>
<template v-if="column.key === 'sellingPoint'">
<a-tooltip :title="record.sellingPoint" placement="topLeft">
{{ record.sellingPoint }}
</a-tooltip>
</template>
<template v-if="column.key === 'userId'">
<a-tag v-if="record.userId > 0" color="green">已绑定</a-tag>
<a-tag v-else color="orange">未绑定</a-tag>
</template>
<template v-if="column.key === 'createTime'">
<a-tooltip :title="`${toDateString(record.createTime)}`">
{{ timeAgo(record.createTime) }}
</a-tooltip>
</template>
<template v-if="column.key === 'batteryPrice'">
<div class="ele-text-placeholder">
价格：<span class="ele-text-heading">￥{{ record.batteryPrice }}</span>
</div>
<div class="ele-text-placeholder">
租金：<span class="ele-text-heading">￥{{ record.batteryRent }}</span>
</div>
<div class="ele-text-placeholder">
押金：<span class="ele-text-heading">￥{{ record.batteryDeposit }}</span>
</div>
<div class="ele-text-placeholder">
保险：<span class="ele-text-heading">￥{{ record.batteryInsurance }}</span>
</div>
</template>
<template v-if="column.key === 'more'">
<div v-if="record.periodsType > 0">
<span class="ele-text-placeholder">分期方式：</span>
{{ record.periodsType === 0 ? '周' : '月' }}
</div>
<div v-if="record.periods > 0">
<span class="ele-text-placeholder">分期期数：</span>
{{ record.periods }}
</div>
<div v-if="record.downPayment">
<span class="ele-text-placeholder">首付款：</span>
{{ record.downPayment }}
</div>
<div v-if="record.repayment > 0">
<span class="ele-text-placeholder">每期还款：</span>
{{ record.repayment }}
</div>
<div v-if="record.serviceCharges > 0">
<span class="ele-text-placeholder">手续费：</span>
{{ record.serviceCharges }}
</div>
</template>
<template v-if="column.key === 'status'">
<a-button
type="link"
@click="onStatus(record.goodsId, 1)"
v-if="record.status === 0"
class="ele-text-success"
>已上架</a-button
>
<a-button type="link" @click="onStatus(record.goodsId, 0)" v-else
>已下架</a-button
>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a-button @click="openEdit(record)">修改</a-button>
<!-- <a-divider type="vertical" />-->
<!-- <a-popconfirm-->
<!-- title="确定要删除此记录吗？"-->
<!-- @confirm="remove(record)"-->
<!-- >-->
<!-- <a class="ele-text-danger">删除</a>-->
<!-- </a-popconfirm>-->
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<equipment-goods-edit
v-model:visible="showEdit"
:data="current"
@done="reload"
/>
</div>
</div>
</template>
<!--suppress TypeScriptValidateTypes -->
<script lang="ts" setup>
import { timeAgo } from 'ele-admin-pro';
import { createVNode, computed, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import EquipmentGoodsEdit from './components/equipment-goods-edit.vue';
import {
pageEquipmentGoods,
removeBatchEquipmentGoods,
updateEquipmentGoods
} from '@/api/apps/equipment/goods';
import type {
EquipmentGoods,
EquipmentGoodsParam
} from '@/api/apps/equipment/goods/model';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 当前用户信息
// const brand = getDictionaryOptions('serverBrand');
// 表格列配置
const columns = ref<ColumnItem[]>([
// {
// key: 'index',
// width: 48,
// align: 'center',
// fixed: 'left',
// hideInSetting: true,
// customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
// },
{
title: '操作',
key: 'action',
width: 120,
fixed: 'left',
align: 'center',
hideInSetting: true
},
{
title: '商品ID',
dataIndex: 'goodsId',
key: 'goodsId',
width: 70,
fixed: 'left'
},
{
title: '下单方式',
dataIndex: 'equipmentCategory',
width: 100,
key: 'equipmentCategory'
},
{
title: '商品名称',
dataIndex: 'goodsName',
width: 180,
ellipsis: true,
key: 'goodsName',
fixed: 'left'
},
// {
// title: '商品图片',
// dataIndex: 'image',
// key: 'image'
// },
// {
// title: '二维码',
// dataIndex: 'qrcode',
// key: 'qrcode'
// },
{
title: '所属商户',
dataIndex: 'merchantName',
key: 'merchantName'
},
{
title: '电池型号',
dataIndex: 'batteryModel',
sorter: true,
ellipsis: true
},
{
title: '电池价格',
dataIndex: 'batteryPrice',
sorter: true,
key: 'batteryPrice'
},
// {
// title: '电池租金',
// dataIndex: 'batteryRent',
// key: 'batteryRent'
// },
// {
// title: '电池押金',
// dataIndex: 'batteryDeposit',
// sorter: true,
// key: 'batteryDeposit'
// },
// {
// title: '电池保险',
// dataIndex: 'batteryInsurance',
// sorter: true,
// key: 'batteryInsurance'
// },
{
title: '分期方案',
dataIndex: 'more',
key: 'more'
},
{
title: '商品卖点',
dataIndex: 'sellingPoint',
key: 'sellingPoint',
ellipsis: true,
hideInTable: true
},
{
title: '排序',
dataIndex: 'sortNumber',
align: 'center',
sorter: true
},
{
title: '状态',
dataIndex: 'status',
sorter: true,
align: 'center',
key: 'status',
fixed: 'right',
customRender: ({ text }) => ['上架', '下架'][text]
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
align: 'center',
sorter: true,
ellipsis: true,
customRender: ({ text }) => toDateString(text)
}
]);
// 表格选中数据
const selection = ref<EquipmentGoods[]>([]);
// 当前编辑数据
const current = ref<EquipmentGoods | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 树形数据
// const data = ref<Category[]>([]);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
// if (filters) {
// where.brand = filters.brand;
// }
return pageEquipmentGoods({ ...where, ...orders, ...filters, page, limit });
};
/* 搜索 */
const reload = (where?: EquipmentGoodsParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
// 搜索是否展开
const searchExpand = ref(false);
// 表格固定高度
const fixedHeight = ref(false);
// 表格高度
const tableHeight = computed(() => {
return fixedHeight.value
? searchExpand.value
? 'calc(100vh - 618px)'
: 'calc(100vh - 562px)'
: void 0;
});
/* 打开编辑弹窗 */
const openEdit = (row?: EquipmentGoods) => {
current.value = row ?? null;
showEdit.value = true;
};
const onStatus = (goodsId, status) => {
updateEquipmentGoods({ goodsId, status }).then((msg) => {
message.success(msg);
reload();
});
};
/* 打开用户详情弹窗 */
// const openInfo = (row?: EquipmentGoods) => {
// current.value = row ?? null;
// showEdit.value = true;
// };
/* 删除单个 */
// const remove = (row: EquipmentGoods) => {
// const hide = message.loading('请求中..', 0);
// removeEquipmentGoods(row.equipmentId)
// .then((msg) => {
// hide();
// message.success(msg);
// reload();
// })
// .catch((e) => {
// hide();
// message.error(e.message);
// });
// };
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchEquipmentGoods(selection.value.map((d) => d.goodsId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 自定义行属性 */
const customRow = (record: EquipmentGoods) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
</script>
<script lang="ts">
export default {
name: 'EquipmentGoodsIndex'
};
</script>
<style lang="less" scoped>
// 文字超出隐藏(两行)
// 需要设置文字容器的宽度
.twoline-hide {
width: 320px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
</style>

39
src/views/apps/equipment/index/components/category-select.vue Normal file
View File

@@ -0,0 +1,39 @@
<!-- 目录选择下拉框 -->
<template>
<a-tree-select
allow-clear
tree-default-expand-all
:placeholder="placeholder"
:value="value || undefined"
:tree-data="data"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
@update:value="updateValue"
/>
</template>
<script lang="ts" setup>
import type { Equipment } from '@/api/apps/equipment/model';
const emit = defineEmits<{
(e: 'update:value', value?: number): void;
}>();
withDefaults(
defineProps<{
// 选中的数据(v-modal)
value?: number;
// 提示信息
placeholder?: string;
// 文章分类
data: Equipment[];
}>(),
{
placeholder: '请选择上级分类'
}
);
/* 更新选中数据 */
const updateValue = (value?: number) => {
emit('update:value', value);
};
</script>

669
src/views/apps/equipment/index/components/equipment-edit.vue Normal file
View File

@@ -0,0 +1,669 @@
<!-- 用户编辑弹窗 -->
<template>
<a-drawer
:width="880"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑设备' : '添加设备'"
:body-style="{ paddingBottom: '8px' }"
:footer-style="{ textAlign: 'right' }"
@update:visible="updateVisible"
:maskClosable="isUpdate"
@ok="save"
>
<a-form
ref="formRef"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
:model="form"
:rules="rules"
>
<a-row :gutter="16">
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="所属商户" name="merchantCode">
<MerchantSelect
dict-code="merchantCode"
placeholder="请选择所属商户"
v-model:value="form.merchantCode"
/>
</a-form-item>
<!-- 1锂电池租赁 3电动车租赁 -->
<a-form-item label="设备名称" name="equipmentName">
<DictSelect
dict-code="equipmentName"
placeholder="请选择设备"
v-model:value="form.equipmentName"
/>
</a-form-item>
<a-form-item label="电池型号" name="batteryModel">
<DictSelect
dict-code="equipmentModel"
placeholder="请选择电池型号"
v-model:value="form.batteryModel"
/>
</a-form-item>
<a-form-item label="工作状态" name="workingStatus">
<DictSelect
dict-code="workingStatus"
v-model:value="form.workingStatus"
placeholder="选择工作状态"
/>
</a-form-item>
<a-form-item label="电池状态" name="batteryStatus">
<DictSelect
dict-code="batteryStatus"
v-model:value="form.batteryStatus"
placeholder="选择电池状态"
/>
</a-form-item>
<a-form-item label="是否在线" name="isOnline">
<DictSelect
dict-code="isOnline"
v-model:value="form.isOnline"
placeholder="是否在线"
/>
</a-form-item>
<a-form-item label="BMS板供应商" name="bmsBrand">
<DictSelect
dict-code="bmsBrand"
v-model:value="form.bmsBrand"
placeholder="选择供应商"
/>
</a-form-item>
<a-form-item label="ICCID" name="iccid">
<a-input
allow-clear
placeholder="请输入剩余容量"
v-model:value="form.iccid"
/>
</a-form-item>
<a-form-item label="电池出厂时间" name="batteryDeliveryTime">
<a-date-picker
class="ele-fluid"
placeholder="请选择时间"
v-model:value="batteryDeliveryTime"
/>
</a-form-item>
</a-col>
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="设备编码" name="equipmentCode">
<a-input
allow-clear
placeholder="请输入设备编码"
:disabled="isUpdate"
v-model:value="form.equipmentCode"
/>
</a-form-item>
<a-form-item label="bms" name="bms">
<a-input
allow-clear
placeholder="请输入设备BMS"
v-model:value="form.bms"
/>
</a-form-item>
<a-form-item label="是否激活" name="isCtive">
<DictSelect
dict-code="ctiveStatus"
v-model:value="form.isCtive"
placeholder="是否激活"
/>
</a-form-item>
<a-form-item label="租赁状态" name="leaseStatus">
<DictSelect
dict-code="leaseStatus"
v-model:value="form.leaseStatus"
placeholder="是否激活"
/>
</a-form-item>
<a-form-item label="电池电量" name="batteryPower">
<a-input
allow-clear
placeholder="请输入电池电量"
v-model:value="form.batteryPower"
/>
</a-form-item>
<a-form-item label="总电压" name="totalVoltage">
<a-input
allow-clear
placeholder="请输入总电压"
v-model:value="form.totalVoltage"
/>
</a-form-item>
<a-form-item label="剩余容量" name="surplusCapacity">
<a-input
allow-clear
placeholder="请输入剩余容量"
v-model:value="form.surplusCapacity"
/>
</a-form-item>
<a-form-item label="设备激活时间" name="ctiveTime">
<a-date-picker
class="ele-fluid"
placeholder="请选择时间"
v-model:value="ctiveTime"
/>
</a-form-item>
<a-form-item label="设备开关" name="status">
<a-switch :checked="form.status === 0" @change="editStatus" />
</a-form-item>
</a-col>
</a-row>
<!-- <a-form-item label="设备图片" name="images">-->
<!-- <ele-image-upload-->
<!-- v-model:value="images"-->
<!-- :limit="14"-->
<!-- :drag="true"-->
<!-- :multiple="true"-->
<!-- :upload-handler="uploadHandler"-->
<!-- @upload="onUpload"-->
<!-- />-->
<!-- </a-form-item>-->
</a-form>
<template #footer>
<a-space>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" @click="save">保存</a-button>
</a-space>
</template>
<!-- <a-tabs v-model:activeKey="activeKey" type="card">-->
<!-- <a-tab-pane key="1" tab="基本信息" />-->
<!-- <a-tab-pane key="2" tab="设备详情">-->
<!-- <a-form-->
<!-- ref="formRef"-->
<!-- :label-col="{ md: { span: 8 }, sm: { span: 24 } }"-->
<!-- :wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"-->
<!-- layout="vertical"-->
<!-- :model="form"-->
<!-- :rules="rules"-->
<!-- >-->
<!-- <a-form-item label="" name="content">-->
<!-- &lt;!&ndash; 编辑器 &ndash;&gt;-->
<!-- <tinymce-editor-->
<!-- v-model:value="content"-->
<!-- :disabled="disabled"-->
<!-- :init="config"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-form>-->
<!-- </a-tab-pane>-->
<!-- </a-tabs>-->
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { Equipment } from '@/api/apps/equipment/model';
import { addEquipment, updateEquipment } from '@/api/apps/equipment';
import { FormInstance, Rule, RuleObject } from 'ant-design-vue/es/form';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { uploadFile } from '@/api/system/file';
import { FILE_SERVER } from '@/config/setting';
import useFormData from '@/utils/use-form-data';
import TinymceEditor from '@/components/TinymceEditor/index.vue';
import { Category } from '@/api/goods/category/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import DictSelect from '@/components/DictSelect/index.vue';
import MerchantSelect from '@/components/MerchantSelect/index.vue';
import { createCode } from '@/utils/common';
import dayjs, { Dayjs } from 'dayjs';
// import MultiSpec from './MultiSpec.vue';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Equipment | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
const disabled = ref(false);
// 选择日期
const batteryDeliveryTime = ref<Dayjs>();
const ctiveTime = ref<Dayjs>();
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
// 提交状态
const loading = ref(false);
// 已上传数据
const images = ref<ItemType[]>([]);
const formRef = ref<FormInstance | null>(null);
// 选项卡位置
// const activeKey = ref('1');
// 编辑器内容，双向绑定
const content = ref<any>('');
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<Equipment>({
equipmentType: 1,
equipmentName: undefined,
equipmentCode: `E${createCode()}`,
batteryModel: undefined,
equipmentCategory: undefined,
bms: undefined,
isCtive: undefined,
workingStatus: undefined,
leaseStatus: undefined,
batteryStatus: undefined,
batteryPower: undefined,
isOnline: undefined,
totalVoltage: undefined,
bmsBrand: undefined,
surplusCapacity: undefined,
iccid: undefined,
ctiveTime: undefined,
batteryDeliveryTime: undefined,
image: '',
files: '',
createTime: '',
comments: '',
sortNumber: 100,
status: 0,
equipmentId: 0,
content: '',
merchantCode: undefined,
batteryRent: 300,
batteryDeposit: 300,
batteryInsurance: 0,
batteryPrice: 0,
tenantId: Number(localStorage.getItem('tenantId'))
});
/* 上传事件 */
const uploadHandler = (file: File) => {
const item: ItemType = {
file,
uid: (file as any).uid,
name: file.name
};
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return;
}
if (file.size / 1024 / 1024 > 2) {
message.error('大小不能超过 2MB');
return;
}
onUpload(item);
};
// 上传文件
const onUpload = (item) => {
const { file } = item;
uploadFile(file)
.then((data) => {
images.value.push({
uid: data.id,
url: FILE_SERVER + data.path,
status: 'done'
});
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
merchantCode: [
{
required: true,
message: '请选择商户',
type: 'string',
trigger: 'blur'
}
],
equipmentName: [
{
required: true,
message: '请输入设备名称',
type: 'string',
trigger: 'blur'
}
],
batteryModel: [
{
required: true,
type: 'string',
message: '请选择电池型号',
trigger: 'blur'
}
],
batteryPrice: [
{
required: true,
message: '请输入销售价格',
type: 'number',
trigger: 'blur'
}
],
batteryRent: [
{
required: true,
message: '请输入租金金额',
type: 'number',
trigger: 'blur'
}
],
equipmentCategory: [
{
required: true,
type: 'string',
message: '请选择设备分类',
trigger: 'blur'
}
],
equipmentCode: [
{
required: true,
type: 'string',
message: '请填写设备编号',
trigger: 'blur'
}
],
isCtive: [
{
required: true,
type: 'string',
message: '请选择是否激活',
trigger: 'blur'
}
],
equipmentType: [
{
required: true,
type: 'number',
message: '请选择设备类型',
trigger: 'blur'
}
],
deliveryType: [
{
required: true,
type: 'number',
message: '请选择配送方式',
trigger: 'blur'
}
],
equipmentPriceMin: [
{
required: true,
type: 'number',
message: '请输入设备价格',
trigger: 'blur'
}
],
stockTotal: [
{
required: true,
type: 'number',
message: '请输入设备库存',
trigger: 'blur'
}
],
specType: [
{
required: true,
type: 'number',
message: '请选择规格类型',
trigger: 'blur'
}
],
deliveryId: [
{
required: true,
type: 'number',
message: '请选择运费模板',
trigger: 'blur'
}
],
status: [
{
required: true,
type: 'number',
message: '请选择设备状态',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
type: 'number',
message: '请输入排序号',
trigger: 'blur'
}
],
deductStockType: [
{
required: true,
type: 'number',
message: '请设置库存计算方式',
trigger: 'blur'
}
],
purchaseLimit: [
{
required: true,
type: 'number',
message: '请设置是否限购',
trigger: 'blur'
}
],
// images: [
// {
// required: true,
// type: 'string',
// message: '请选择设备图片',
// trigger: 'blur',
// validator: async (_rule: RuleObject, value: string) => {
// if (images.value.length == 0) {
// return Promise.reject('请上传设备图片');
// }
// return Promise.resolve();
// }
// }
// ],
customerId: [
{
required: true,
type: 'number',
message: '请选择客户'
}
],
linePriceMin: [
{
required: true,
type: 'number',
message: '请输入设备划线价',
trigger: 'blur'
}
],
content: [
{
required: true,
type: 'string',
message: '请输入文章内容',
trigger: 'blur',
validator: async (_rule: RuleObject, value: string) => {
if (content.value == '') {
return Promise.reject('请输入文字内容');
}
return Promise.resolve();
}
}
],
brand: [
{
required: true,
type: 'string',
message: '请选项设备厂商',
trigger: 'blur'
}
]
});
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
const config = ref({
height: 500,
// 自定义文件上传(这里使用把选择的文件转成 blob 演示)
file_picker_callback: (callback: any, _value: any, meta: any) => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
// 设定文件可选类型
if (meta.filetype === 'image') {
input.setAttribute('accept', 'image/*');
} else if (meta.filetype === 'media') {
input.setAttribute('accept', 'video/*');
}
input.onchange = () => {
const file = input.files?.[0];
if (!file) {
return;
}
if (meta.filetype === 'media') {
if (!file.type.startsWith('video/')) {
editorRef.value?.alert({ content: '只能选择视频文件' });
return;
}
}
if (file.size / 1024 / 1024 > 20) {
editorRef.value?.alert({ content: '大小不能超过 20MB' });
return;
}
const reader = new FileReader();
reader.onload = (e) => {
if (e.target?.result != null) {
const blob = new Blob([e.target.result], { type: file.type });
callback(URL.createObjectURL(blob));
}
};
reader.readAsArrayBuffer(file);
};
input.click();
}
});
/* 控制放店开关 */
const editStatus = () => {
if (form.status == 0) {
form.status = 1;
} else {
form.status = 0;
}
updateEquipment(form)
.then(() => {
message.success('操作成功');
})
.catch((e) => {
message.error(e.message);
});
};
const onClose = () => {
updateVisible(false);
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
// 获取第一张图片作为封面图
images.value.map((d, i) => {
if (i === 0) {
form.image = d.url;
}
});
const equipmentForm = {
...form,
files: JSON.stringify(images.value),
content: content.value,
batteryDeliveryTime: batteryDeliveryTime.value?.format(
'YYYY-MM-DD HH:mm:ss'
),
ctiveTime: ctiveTime.value?.format('YYYY-MM-DD HH:mm:ss')
};
console.log(equipmentForm, 'equipmentForm');
const saveOrUpdate = isUpdate.value ? updateEquipment : addEquipment;
saveOrUpdate(equipmentForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data
});
if (props.data.batteryDeliveryTime) {
batteryDeliveryTime.value = dayjs(
props.data.batteryDeliveryTime,
'YYYY-MM-DD'
);
ctiveTime.value = dayjs(props.data.ctiveTime, 'YYYY-MM-DD');
} else {
batteryDeliveryTime.value = undefined;
ctiveTime.value = undefined;
}
// images.value = JSON.parse(String(props.data.files));
content.value = props.data.content;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

145
src/views/apps/equipment/index/components/search.vue Normal file
View File

@@ -0,0 +1,145 @@
<!-- 搜索表单 -->
<template>
<a-space>
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<PlusOutlined />
</template>
<span>新建</span>
</a-button>
<a-button
danger
type="primary"
class="ele-btn-icon"
:v-role="`dev`"
@click="removeBatch"
:disabled="props.selection.length === 0"
>
<template #icon>
<DeleteOutlined />
</template>
<span>批量删除</span>
</a-button>
<!-- <a-radio-group v-model:value="listType" @change="handleTabs">-->
<!-- <a-radio-button value="all">全部</a-radio-button>-->
<!-- <a-radio-button value="onSale">出售中</a-radio-button>-->
<!-- <a-radio-button value="offSale">已下架</a-radio-button>-->
<!-- <a-radio-button value="soldOut">已售罄</a-radio-button>-->
<!-- </a-radio-group>-->
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入搜索关键词"
@search="search"
@pressEnter="search"
>
<template #addonBefore>
<a-select v-model:value="type" style="width: 120px; margin: -5px -12px">
<a-select-option value="equipmentCode">设备编号</a-select-option>
<a-select-option value="equipmentName">设备名称</a-select-option>
<a-select-option value="merchantCode">商户编号</a-select-option>
</a-select>
</template>
</a-input-search>
<!-- <CustomerSelect-->
<!-- v-model:value="where.equipmentId"-->
<!-- :placeholder="`按设备筛选`"-->
<!-- @select="onSelect"-->
<!-- @clear="onClear"-->
<!-- />-->
</a-space>
</template>
<script lang="ts" setup>
import {
PlusOutlined,
EditOutlined,
DeleteOutlined
} from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { EquipmentParam } from '@/api/apps/equipment/model';
// import CustomerSelect from '@/components/CustomerSelect/index.vue';
import { ref, watch } from 'vue';
const emit = defineEmits<{
(e: 'search', where?: EquipmentParam): void;
(e: 'add'): void;
(e: 'remove'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where } = useSearch<EquipmentParam>({
equipmentId: undefined,
equipmentName: '',
equipmentCode: '',
merchantCode: ''
});
// 下来选项
const type = ref('equipmentCode');
// tabType
// const listType = ref('all');
// 搜索内容
const searchText = ref('');
/* 搜索 */
const search = () => {
where.equipmentName = undefined;
where.equipmentCode = undefined;
where.merchantCode = undefined;
if (type.value == 'equipmentName') {
where.equipmentName = searchText.value;
}
if (type.value == 'equipmentCode') {
where.equipmentCode = searchText.value;
}
if (type.value == 'merchantCode') {
where.merchantCode = searchText.value;
}
emit('search', where);
};
// const handleTabs = (e) => {
// listType.value = e.target.value;
// if (listType.value == 'all') {
// resetFields();
// }
// if (listType.value == 'onSale') {
// where.status = 0;
// }
// if (listType.value == 'offSale') {
// where.status = 1;
// }
// if (listType.value == 'soldOut') {
// where.stockTotal = 0;
// }
// emit('search', where);
// };
// 新增
const add = () => {
emit('add');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
/* 重置 */
// const reset = () => {
// resetFields();
// search();
// };
// 监听字典id变化
watch(
() => props.selection,
() => {}
);
</script>

377
src/views/apps/equipment/index/index.vue Normal file
View File

@@ -0,0 +1,377 @@
<template>
<div class="page">
<a-page-header :ghost="false" title="设备管理">
<div class="ele-text-secondary"> 设备管理，云芯威电池管理定制模块。 </div>
</a-page-header>
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="equipmentId"
:columns="columns"
:height="tableHeight"
:datasource="datasource"
v-model:selection="selection"
:scroll="{ x: 3000 }"
>
<template #toolbar>
<search
:selection="selection"
@search="reload"
@add="openEdit"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="40" />
</template>
<template v-if="column.key === 'equipmentCode'">
<span>{{ record.equipmentCode }}</span>
</template>
<template v-if="column.key === 'equipmentName'">
{{ record.equipmentName }}
</template>
<template v-if="column.key === 'merchantName'">
<div style="display: flex; flex-direction: column">
<span>{{ record.merchantName }}</span>
<span class="ele-text-placeholder">
商户编号：{{ record.merchantCode }}
</span>
</div>
</template>
<template v-if="column.key === 'user'">
<User v-if="record.user" :record="record.user" />
</template>
<template v-if="column.key === 'qrcode'">
<a-image :src="record.qrcode" :width="50" />
</template>
<template v-if="column.key === 'batteryPrice'">
<strong class="ele-text-danger">
￥{{ record.batteryPrice }}
</strong>
</template>
<template v-if="column.key === 'batteryRent'">
<strong class="ele-text-danger">
￥{{ record.batteryRent }}/月
</strong>
</template>
<template v-if="column.key === 'batteryDeposit'">
<strong class="ele-text-danger">
￥{{ record.batteryDeposit }}
</strong>
</template>
<template v-if="column.key === 'batteryInsurance'">
<strong class="ele-text-danger">
￥{{ record.batteryInsurance }}
</strong>
</template>
<template v-if="column.key === 'isOnline'">
<a-tag v-if="record.status === 0" color="green">正常</a-tag>
<a-tag v-if="record.status === 1" color="orange">异常</a-tag>
</template>
<template v-if="column.key === 'comments'">
<a-tooltip :title="record.comments" placement="topLeft">
{{ record.comments }}
</a-tooltip>
</template>
<template v-if="column.key === 'userId'">
<a-tag v-if="record.userId === 0" color="orange">未绑定</a-tag>
<a-tag v-else color="green">已绑定</a-tag>
</template>
<template v-if="column.key === 'createTime'">
<a-tooltip :title="`${toDateString(record.createTime)}`">
{{ timeAgo(record.createTime) }}
</a-tooltip>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a-button @click="openEdit(record)">修改</a-button>
<!-- <a-divider type="vertical" />-->
<!-- <a-popconfirm-->
<!-- title="确定要删除此记录吗？"-->
<!-- @confirm="remove(record)"-->
<!-- >-->
<!-- <a class="ele-text-danger">删除</a>-->
<!-- </a-popconfirm>-->
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<equipment-edit
v-model:visible="showEdit"
:data="current"
@done="reload"
/>
</div>
</div>
</template>
<!--suppress TypeScriptValidateTypes -->
<script lang="ts" setup>
import { timeAgo } from 'ele-admin-pro';
import { createVNode, computed, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import EquipmentEdit from './components/equipment-edit.vue';
import { pageEquipment, removeBatchEquipment } from '@/api/apps/equipment';
import type { Equipment, EquipmentParam } from '@/api/apps/equipment/model';
// import { Category } from '@/api/goods/category/model';
// import { getDictionaryOptions } from '@/utils/common';
// import { useUserStore } from '@/store/modules/user';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 当前用户信息
// const brand = getDictionaryOptions('serverBrand');
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '操作',
key: 'action',
width: 90,
fixed: 'left',
align: 'center',
hideInSetting: true
},
{
title: '二维码',
dataIndex: 'qrcode',
key: 'qrcode',
fixed: 'left',
align: 'center',
width: 80
},
{
title: '设备编号',
dataIndex: 'equipmentCode',
key: 'equipmentCode'
},
{
title: '所属商户',
dataIndex: 'merchantName',
key: 'merchantName',
sorter: true,
width: 220,
ellipsis: true
},
{
title: '用户信息',
dataIndex: 'user',
key: 'user'
},
{
title: '设备名称',
dataIndex: 'equipmentName',
key: 'equipmentName'
},
{
title: '激活状态',
dataIndex: 'isCtive',
sorter: true
},
{
title: '在线状态',
dataIndex: 'isOnline',
sorter: true,
ellipsis: true
},
{
title: '电池型号',
dataIndex: 'batteryModel',
sorter: true,
ellipsis: true
},
{
title: 'BMS',
dataIndex: 'bms',
ellipsis: true
},
{
title: '工作状态',
dataIndex: 'workingStatus',
sorter: true,
ellipsis: true
},
{
title: '租赁状态',
dataIndex: 'leaseStatus',
sorter: true,
key: 'leaseStatus'
},
{
title: '电池状态',
dataIndex: 'batteryStatus',
sorter: true,
key: 'batteryStatus',
showSorterTooltip: false,
customRender: ({ text }) => ['上架', '下架'][text]
},
{
title: '电池电量',
dataIndex: 'batteryPower',
sorter: true,
key: 'batteryPower'
},
{
title: '排序',
dataIndex: 'sortNumber',
sorter: true
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
ellipsis: true,
hideInTable: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '绑定状态',
dataIndex: 'userId',
key: 'userId',
fixed: 'right',
width: 100,
align: 'center',
sorter: true
}
]);
// 表格选中数据
const selection = ref<Equipment[]>([]);
// 当前编辑数据
const current = ref<Equipment | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 树形数据
// const data = ref<Category[]>([]);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
// if (filters) {
// where.brand = filters.brand;
// }
return pageEquipment({ ...where, ...orders, ...filters, page, limit });
};
/* 搜索 */
const reload = (where?: EquipmentParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
// 搜索是否展开
const searchExpand = ref(false);
// 表格固定高度
const fixedHeight = ref(false);
// 表格高度
const tableHeight = computed(() => {
return fixedHeight.value
? searchExpand.value
? 'calc(100vh - 618px)'
: 'calc(100vh - 562px)'
: void 0;
});
/* 打开编辑弹窗 */
const openEdit = (row?: Equipment) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
// const openInfo = (row?: Equipment) => {
// current.value = row ?? null;
// showEdit.value = true;
// };
/* 删除单个 */
// const remove = (row: Equipment) => {
// const hide = message.loading('请求中..', 0);
// removeEquipment(row.equipmentId)
// .then((msg) => {
// hide();
// message.success(msg);
// reload();
// })
// .catch((e) => {
// hide();
// message.error(e.message);
// });
// };
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchEquipment(selection.value.map((d) => d.equipmentId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
</script>
<script lang="ts">
export default {
name: 'EquipmentIndex'
};
</script>
<style lang="less" scoped>
// 文字超出隐藏(两行)
// 需要设置文字容器的宽度
.twoline-hide {
width: 320px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
</style>

186
src/views/apps/equipment/order/components/delivery.vue Normal file
View File

@@ -0,0 +1,186 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="500"
:visible="visible"
:confirm-loading="loading"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '发货' : '发货'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-space>
<a-form>
<a-form-item label="设备编码" v-bind="validateInfos.equipmentCode">
<a-input
allow-clear
:maxlength="30"
placeholder="请输入设备编码"
v-model:value="form.equipmentCode"
@blur="
validate('equipmentCode', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<!-- <a-row :gutter="16">-->
<!-- <a-col :md="12" :sm="24" :xs="24">-->
<!-- <a-form-item label="选择设备" v-bind="validateInfos.customerName">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- :maxlength="30"-->
<!-- placeholder="请选择设备"-->
<!-- v-model:value="form.customerName"-->
<!-- @blur="-->
<!-- validate('customerName', { trigger: 'blur' }).catch(() => {})-->
<!-- "-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- <a-col :md="12" :sm="24" :xs="24">-->
<!-- <a-form-item label="手机号码" v-bind="validateInfos.customerMobile">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- :maxlength="20"-->
<!-- placeholder="请填写联系人手机号码"-->
<!-- v-model:value="form.customerMobile"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- </a-row>-->
</a-form>
</a-space>
</ele-modal>
</template>
<script lang="ts" setup>
import {ref, reactive, watch, computed} from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import TypeSelect from './customer-edit/type-select.vue';
import ProgressSelect from './customer-edit/progress-select.vue';
import SourceSelect from './customer-edit/source-select.vue';
import { bindEquipment } from '@/api/apps/equipment';
import type { Customer } from '@/api/oa/customer/model';
import { createCode } from '@/utils/common';
import { uploadFile } from '@/api/system/file';
import type { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FILE_SERVER } from '@/config/setting';
import { useUserStore } from '@/store/modules/user';
import { Equipment } from "@/api/apps/equipment/model";
import { Order } from "@/api/order/model";
const userStore = useUserStore();
// 当前用户信息
const loginUser = computed(() => userStore.info ?? {});
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Order | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 用户信息
const form = reactive<Equipment>({
equipmentCode: '',
orderId: undefined
});
// 已上传数据, 可赋初始值用于回显
const images = ref(<any>[]);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
equipmentCode: [
{
required: true,
type: 'string',
message: '请输入设备编码',
trigger: 'blur'
}
]
});
const { resetFields, validate, validateInfos } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
// 去除空格
const data = {
...form,
orderId: props.data?.orderId,
userId: props.data?.userId
};
// 转字符串
bindEquipment(data)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
const onUpload = (d: ItemType) => {
uploadFile(<File>d.file)
.then((result) => {
form.customerAvatar = result.path;
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
// 头像赋值
images.value = [];
if(props.data.customerAvatar){
images.value.push({ uid:1, url: FILE_SERVER + props.data.customerAvatar, status: '' });
}
assignObject(form, props.data);
isUpdate.value = true;
} else {
form.customerCode = createCode();
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less"></style>

118
src/views/apps/equipment/order/components/field.vue Normal file
View File

@@ -0,0 +1,118 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="500px"
:visible="visible"
:confirm-loading="loading"
:title="`修改价格`"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form layout="horizontal">
<a-form-item>
<a-input-number :min="0" style="width: 200px" v-model:value="content" />
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import { updateOrder } from '@/api/order';
import { Order } from '@/api/order/model';
import { createOrderNo } from "@/utils/common";
// import { reloadPageTab } from '@/utils/page-tab-util';
const useForm = Form.useForm;
// 是否是修改
const isUpdate = ref(false);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
data?: Order | null;
// 修改回显的数据
field?: string | null;
orderId?: number | 0;
content?: number | 0;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
const content = ref<number>(0);
const placeholder = ref('请输入订单金额');
// 用户信息
const form = reactive<Order>({
orderId: 0,
comments: '',
payPrice: undefined
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
const { resetFields, validate } = useForm(form);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
// 判断更新字段
form.orderId = props.orderId;
if (props.field === 'payPrice') {
form.payPrice = Number(content.value);
form.totalPrice = Number(content.value);
form.orderNo = createOrderNo();
}
updateOrder(form)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.orderId) {
loading.value = false;
content.value = props.content;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
if (props.field == 'tenantCode') {
placeholder.value = '请输入要绑定的主体编号';
content.value = undefined;
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
</style>

139
src/views/apps/equipment/order/components/markdown.vue Normal file
View File

@@ -0,0 +1,139 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="600px"
:visible="visible"
:confirm-loading="loading"
:title="`修改内容`"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<!-- 编辑器 -->
<byte-md-editor
v-model:value="content"
:locale="zh_Hans"
:plugins="plugins"
uploadImages
height="300px"
:editorConfig="{ lineNumbers: true }"
/>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import { updateOrder } from '@/api/order';
import { Order } from '@/api/order/model';
// import { reloadPageTab } from '@/utils/page-tab-util';
import 'bytemd/dist/index.min.css';
import 'github-markdown-css/github-markdown-light.css';
// import TinymceEditor from '@/components/TinymceEditor/index.vue';
import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
import highlight from '@bytemd/plugin-highlight';
// 中文语言文件
import zh_Hans from 'bytemd/locales/zh_Hans.json';
// // 链接、删除线、复选框、表格等的插件
import gfm from '@bytemd/plugin-gfm';
// // 插件的中文语言文件
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
// // 预览界面的样式，这里用的 github 的 markdown 主题
import 'github-markdown-css/github-markdown-light.css';
const useForm = Form.useForm;
// 是否是修改
const isUpdate = ref(false);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
data?: Order | null;
// 修改回显的数据
field?: string | null;
content?: string;
orderId?: number;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 插件
const plugins = ref([
gfm({
locale: zh_HansGfm
}),
highlight()
]);
// 提交状态
const loading = ref(false);
const content = ref('');
// 用户信息
const form = reactive<Order>({
orderId: 0,
comments: ''
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
const { resetFields, validate } = useForm(form);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
// 判断更新字段
form.orderId = props.orderId;
if (props.field === 'content') {
form.comments = content.value;
}
if (props.field === 'comments') {
form.comments = content.value;
}
updateOrder(form)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
content.value = String(props.content);
console.log(visible);
if (visible) {
if (props.data) {
loading.value = false;
content.value = String(props.content);
assignObject(form, props.data);
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
</style>

289
src/views/apps/equipment/order/components/order-edit.vue Normal file
View File

@@ -0,0 +1,289 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="680"
:visible="visible"
:confirm-loading="loading"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑订单' : '添加订单'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-space>
<a-form
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
>
<a-row :gutter="16">
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="订单名称" v-bind="validateInfos.customerName">
<a-input
allow-clear
:maxlength="30"
placeholder="请输入订单名称"
v-model:value="form.customerName"
@blur="
validate('customerName', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="订单标识" v-bind="validateInfos.customerCode">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入用户账号"
v-model:value="form.customerCode"
/>
</a-form-item>
<a-form-item label="跟进状态" v-bind="validateInfos.progress">
<progress-select
v-model:value="form.progress"
@blur="
validate('progress', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="订单类型" v-bind="validateInfos.customerType">
<type-select
v-model:value="form.customerType"
@blur="
validate('customerType', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="订单来源" v-bind="validateInfos.customerSource">
<source-select
v-model:value="form.customerSource"
@blur="
validate('customerSource', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="头像" v-bind="validateInfos.customerAvatar">
<ele-image-upload
v-model:value="images"
:item-style="{ width: '90px', height: '90px' }"
:limit="1"
@upload="onUpload"
/>
</a-form-item>
</a-col>
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="联系人" v-bind="validateInfos.customerContacts">
<a-input
allow-clear
:maxlength="20"
placeholder="请填写联系人"
v-model:value="form.customerContacts"
/>
</a-form-item>
<a-form-item label="手机号码" v-bind="validateInfos.customerMobile">
<a-input
allow-clear
:maxlength="20"
placeholder="请填写联系人手机号码"
v-model:value="form.customerMobile"
/>
</a-form-item>
<a-form-item
label="联系地址"
v-bind="validateInfos.customerAddress"
>
<a-input
allow-clear
placeholder="请填写联系地址"
v-model:value="form.customerAddress"
/>
</a-form-item>
<a-form-item label="公司座机" v-bind="validateInfos.customerPhone">
<a-input
allow-clear
:maxlength="20"
placeholder="请填写公司座机电话"
v-model:value="form.customerPhone"
/>
</a-form-item>
<a-form-item label="排序" v-bind="validateInfos.sortNumber">
<a-input
allow-clear
:maxlength="20"
placeholder="排序"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="备注" v-bind="validateInfos.comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入备注"
v-model:value="form.comments"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-space>
</ele-modal>
</template>
<script lang="ts" setup>
import {ref, reactive, watch, computed} from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import TypeSelect from './customer-edit/type-select.vue';
import ProgressSelect from './customer-edit/progress-select.vue';
import SourceSelect from './customer-edit/source-select.vue';
import { addCustomer, updateCustomer } from '@/api/oa/customer';
import type { Customer } from '@/api/oa/customer/model';
import { createCode } from '@/utils/common';
import { uploadFile } from '@/api/system/file';
import type { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FILE_SERVER } from '@/config/setting';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
// 当前用户信息
const loginUser = computed(() => userStore.info ?? {});
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Customer | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 用户信息
const form = reactive<Customer>({
customerCode: '',
customerName: '',
customerType: undefined,
progress: undefined,
customerMobile: '',
customerAvatar: '',
customerPhone: '',
customerContacts: '',
customerAddress: '',
comments: '',
status: '0',
sortNumber: 100,
customerId: 0,
userId: '',
});
// 已上传数据, 可赋初始值用于回显
const images = ref(<any>[]);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
customerName: [
{
required: true,
type: 'string',
message: '请输入订单名称',
trigger: 'blur'
}
],
customerCode: [
{
required: true,
type: 'string',
message: '请输入合法的IP地址',
trigger: 'blur'
}
],
progress: [
{
required: true,
type: 'string',
message: '请选择跟进状态',
trigger: 'blur'
}
]
});
const { resetFields, validate, validateInfos } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
// 去除空格
form.customerName = form.customerName?.replace(/\s*/g, '');
if(isUpdate.value == false) {
form.userId = loginUser.value.userId;
}
const data = {
...form
};
// 转字符串
const saveOrUpdate = isUpdate.value ? updateCustomer : addCustomer;
saveOrUpdate(data)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
const onUpload = (d: ItemType) => {
uploadFile(<File>d.file)
.then((result) => {
form.customerAvatar = result.path;
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
// 头像赋值
images.value = [];
if(props.data.customerAvatar){
images.value.push({ uid:1, url: FILE_SERVER + props.data.customerAvatar, status: '' });
}
assignObject(form, props.data);
isUpdate.value = true;
} else {
form.customerCode = createCode();
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less"></style>

715
src/views/apps/equipment/order/components/order-info.vue Normal file
View File

@@ -0,0 +1,715 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="`80%`"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑订单' : '订单详情'"
:body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
@update:visible="updateVisible"
:maskClosable="false"
:footer="null"
@ok="save"
>
<a-card class="order-card" :bordered="false">
<a-steps
:current="active"
direction="horizontal"
:responsive="styleResponsive"
>
<template v-for="(item, index) in steps" :key="index">
<a-step
:title="item.title"
:description="timeAgo(item.description)"
/>
</template>
</a-steps>
</a-card>
<a-card title="订单操作" class="order-card">
<a-space>
<a-button>发货</a-button>
<a-button>商家备注</a-button>
<a-button>打印小票</a-button>
</a-space>
<a-row :gutter="16" style="margin-top: 34px">
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单编号" name="orderNo">
<span>{{ data.orderNo }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="实付款金额" name="payPrice">
<span class="ele-text-warning">￥{{ formatNumber(data.payPrice) }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="支付方式" name="payMethod">
<Tag dict-code="payMethod" v-model:value="data.payMethod" />
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="配送方式" name="deliveryType">
<Tag dict-code="deliveryType" v-model:value="data.deliveryType" />
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="运费金额" name="deliveryType">
<span>￥{{ formatNumber(data.expressPrice) }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单状态" name="orderStatus">
<Tag dict-code="orderStatus" v-model:value="data.orderStatus" />
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="买家信息" name="deliveryType">
<router-link :to="'/system/user/details?id=' + data.userId">
<span class="ele-text-primary">{{ data.nickname }}</span>
</router-link>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="第三方交易号" name="tradeId">
<span>{{ data.tradeId }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="设备编号" name="equipmentCode">
<span>
{{ bindEquipmentCode }}
<copy-outlined
style="padding-left: 4px"
@click="copyText(bindEquipmentCode)"
/>
</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="下单时间" name="createTime">
{{ data.createTime }}
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="到期时间" name="expirationTime">
{{ data.expirationTime }}
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="买家留言" name="buyerRemark">
<span>{{ data.buyerRemark }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单备注" name="comments">
<span>{{ data.comments }}</span>
</a-form-item>
</a-col>
</a-row>
</a-card>
<a-card title="订单商品" class="order-card">
<a-spin :spinning="loading">
<a-table
:data-source="EquipmentOrderGoodsList"
:columns="columns"
:pagination="false"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'goodsName'">
<a-image
v-if="record.image"
:src="record.image"
:preview="false"
:width="50"
/>
<span>{{ record.goodsName }}</span>
</template>
<template v-if="column.key === 'batteryRent'">
<div>电池租金：￥{{ record.batteryRent }}</div>
<div>电池押金：￥{{ record.batteryDeposit }}</div>
<div>电池保险：￥{{ record.batteryInsurance }}</div>
</template>
<template v-if="column.key === 'equipmentCategory'">
<a-tag
v-if="Number(record.equipmentCategory) === 10"
color="success"
>销售</a-tag
>
<a-tag v-if="Number(record.equipmentCategory) === 20" color="red"
>分期</a-tag
>
<a-tag
v-if="Number(record.equipmentCategory) === 30"
color="orange"
>以租代购</a-tag
>
<a-tag v-if="Number(record.equipmentCategory) === 40" color="blue"
>租赁</a-tag
>
</template>
<template v-if="column.key === 'more'">
<div v-if="record.periodsType > 0">
<span class="ele-text-placeholder">分期方式：</span>
{{ record.periodsType === 0 ? '周' : '月' }}
</div>
<div v-if="record.periods > 0">
<span class="ele-text-placeholder">分期期数：</span>
{{ record.periods }}
</div>
<div v-if="record.downPayment">
<span class="ele-text-placeholder">首付款：</span>
{{ record.downPayment }}
</div>
<div v-if="record.repayment > 0">
<span class="ele-text-placeholder">每期还款：</span>
{{ record.repayment }}
</div>
<div v-if="record.serviceCharges > 0">
<span class="ele-text-placeholder">手续费：</span>
{{ record.serviceCharges }}
</div>
</template>
</template>
</a-table>
</a-spin>
</a-card>
<a-card title="换电记录" class="order-card">
<a-spin :spinning="loading">
<a-table
:data-source="equipmentRecordList"
:columns="columns3"
ref="tableRef3"
:pagination="false"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'batteryModel'">
<div>电池租金：￥{{ record.batteryDeposit }}</div>
<div>电池押金：￥{{ record.batteryDeposit }}</div>
<div>电池保险：￥{{ record.batteryInsurance }}</div>
</template>
<template v-if="column.key === 'expirationDay'">
<span class="ele-text-danger">{{ expirationDay(record) }}</span>
</template>
</template>
</a-table>
</a-spin>
</a-card>
<a-card title="续费订单" class="order-card">
<a-spin :spinning="loading">
<a-table
:data-source="renewOrderList"
:columns="columns2"
ref="tableRef2"
:pagination="false"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'batteryModel'">
<div>电池租金：￥{{ record.batteryDeposit }}</div>
<div>电池押金：￥{{ record.batteryDeposit }}</div>
<div>电池保险：￥{{ record.batteryInsurance }}</div>
</template>
<template v-if="column.key === 'expirationTime'">
<div>{{ record.startTime }}</div>
<div>{{ record.expirationTime}}</div>
</template>
<template v-if="column.key === 'expirationDay'">
<span class="ele-text-danger">{{ expirationDay(record) }}</span>
</template>
</template>
</a-table>
</a-spin>
</a-card>
<a-card title="订单附件" class="order-card">
<a-spin :spinning="loading">
<ele-image-upload
v-model:value="files"
disabled
:item-style="{ width: '150px', height: '99px' }"
/>
</a-spin>
</a-card>
<a-card title="买家收货地址" class="order-card">
<a-row :gutter="16">
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="收货人姓名" name="orderNo">
<router-link :to="'/system/user/details?id=' + data.userId">
<span class="ele-text-primary">{{ data.nickname }}</span>
</router-link>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="联系电话" name="payPrice" />
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="所在地区" name="payMethod" />
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="详细地址" name="payMethod" />
</a-col>
</a-row>
</a-card>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form } from 'ant-design-vue';
import { assignObject, EleProTable, timeAgo } from 'ele-admin-pro';
import { useThemeStore } from '@/store/modules/theme';
import { formatNumber } from 'ele-admin-pro/es';
import { storeToRefs } from 'pinia';
import { copyText } from '@/utils/common';
import { Order } from '@/api/order/model';
import { listEquipmentOrderGoods } from '@/api/apps/equipment/order/goods';
import { EquipmentOrderGoods } from '@/api/apps/equipment/order/goods/model';
import * as EquipmentApi from '@/api/apps/equipment';
import * as EquipmentRecordApi from '@/api/apps/equipment/record';
import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
import { listOrder } from '@/api/order';
import { CopyOutlined } from '@ant-design/icons-vue';
import { EquipmentRecord } from '@/api/apps/equipment/record/model';
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Order | null;
}>();
export interface step {
title?: String | undefined;
subTitle?: String | undefined;
description?: String | undefined;
}
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
const EquipmentOrderGoodsList = ref<EquipmentOrderGoods[]>([]);
const renewOrderList = ref<Order[]>([]);
const equipmentRecordList = ref<EquipmentRecord[]>([]);
const bindEquipmentCode = ref<string>();
const files = ref<any[]>();
// 步骤条
const steps = ref<step[]>([
{
title: '下单',
description: undefined
},
{
title: '付款',
description: undefined
},
{
title: '发货',
description: undefined
},
{
title: '收货',
description: undefined
},
{
title: '完成',
description: undefined
}
]);
const active = ref(2);
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 订单信息
const order = reactive<Order>({
orderId: undefined,
orderNo: '',
userId: undefined,
orderSourceData: ''
});
// 请求状态
const loading = ref(true);
const { resetFields } = useForm(order);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
const columns = ref<ColumnItem[]>([
// {
// title: '商品ID',
// dataIndex: 'goodsId'
// },
{
title: '商品信息',
dataIndex: 'goodsName',
key: 'goodsName'
},
{
title: '下单方式',
dataIndex: 'equipmentCategory',
key: 'equipmentCategory'
},
{
title: '电池型号',
dataIndex: 'batteryModel',
key: 'batteryModel'
},
{
title: '电池价格',
dataIndex: 'batteryPrice',
key: 'batteryPrice',
customRender: ({ text }) => '￥' + text
},
{
title: '电池租金',
dataIndex: 'batteryRent',
key: 'batteryRent',
customRender: ({ text }) => '￥' + text
},
{
title: '分期方案',
dataIndex: 'more',
key: 'more'
},
{
title: '购买数量',
dataIndex: 'num',
key: 'num',
customRender: ({}) => 1
}
]);
// 表格实例
const tableRef2 = ref<InstanceType<typeof EleProTable> | null>(null);
const columns2 = ref<ColumnItem[]>([
{
title: '当前期数',
dataIndex: 'index',
key: 'index',
customRender: ({ index }) => {
return '第' + (index + 1) + '期';
}
},
{
title: '订单金额',
dataIndex: 'orderPrice',
key: 'orderPrice',
customRender: ({ text }) => '￥' + text
},
{
title: '设备租金',
dataIndex: 'batteryModel',
key: 'batteryModel'
},
{
title: '有效期限',
dataIndex: 'expirationTime',
key: 'expirationTime'
},
{
title: '付款时间',
dataIndex: 'payTime',
key: 'payTime'
},
{
title: '逾期状态',
dataIndex: 'expirationDay',
key: 'expirationDay'
}
]);
const columns3 = ref<ColumnItem[]>([
{
title: '设备编号',
dataIndex: 'equipmentCode',
key: 'equipmentCode'
},
{
title: '所属门店',
dataIndex: 'merchantName',
key: 'merchantName'
},
{
title: '事件类型',
dataIndex: 'eventType',
key: 'eventType'
},
{
title: '使用电池',
dataIndex: 'use'
},
{
title: '操作人',
dataIndex: 'nickname',
key: 'nickname'
},
{
title: '操作时间',
dataIndex: 'createTime',
key: 'createTime'
}
]);
/* 制作步骤条 */
const loadSteps = (order) => {
steps.value = [];
steps.value.push({
title: '下单'
});
steps.value.push({
title: '付款'
});
steps.value.push({
title: '发货'
});
steps.value.push({
title: '收货'
});
steps.value.push({
title: '完成'
});
// 下单
if (order.payStatus == 10) {
active.value = 0;
steps.value[0].description = order.createTime;
}
// 付款
if (order.payStatus == 20) {
active.value = 1;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
}
// 发货
if (order.payStatus == 20 && order.deliveryStatus == 20) {
active.value = 2;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
}
// 收货
if (order.payStatus == 20 && order.receiptStatus == 20) {
active.value = 3;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
steps.value[3].description = order.receiptTime;
}
// 完成
if (order.payStatus == 20 && order.orderStatus == 30) {
active.value = 4;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
steps.value[3].description = order.receiptTime;
}
// 已取消
if (order.orderStatus == 20) {
active.value = 4;
}
};
const getEquipmentOrderGoods = () => {
const orderId = props.data?.orderId;
const goodsId = props.data?.goodsId;
listEquipmentOrderGoods({ orderId,goodsId }).then((data) => {
EquipmentOrderGoodsList.value = data;
});
};
const getEquipment = () => {
EquipmentApi.listEquipment({ orderId: order.orderId }).then((data) => {
if (data.length > 0) {
bindEquipmentCode.value = data[0].equipmentCode;
}
});
};
const getRenewOrder = () => {
loading.value = true;
listOrder({
rentOrderId: order.orderId,
payStatus: 20
}).then((data) => {
renewOrderList.value = data;
loading.value = false;
});
};
const getEquipmentRecordList = () => {
EquipmentRecordApi.listEquipmentRecord({
orderId: order.orderId,
userId: order.userId
}).then((data) => {
equipmentRecordList.value = data;
});
};
const expirationDay = (order) => {
const setTime = new Date(order.expirationTime);
const nowTime = new Date(order.payTime);
const restSec = setTime.getTime() - nowTime.getTime();
// 剩余天数
const day = parseInt(String(restSec / (60 * 60 * 24 * 1000)));
if (day < 0) {
return '逾期' + Math.abs(day) + '天';
}
};
const getFiles = () => {
if (order.orderSourceData != '') {
const array = JSON.parse(<string>order.orderSourceData);
files.value = array.map((url, id) => {
return {
id: id,
url: url,
status: 'done'
};
});
}
};
/* 保存编辑 */
const save = () => {};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignObject(order, props.data);
loadSteps(props.data);
getFiles();
getEquipmentOrderGoods();
getRenewOrder();
getEquipment();
getEquipmentRecordList();
}
} else {
resetFields();
}
}
);
</script>
<style lang="less" scoped>
.order-card {
margin-bottom: 20px;
}
.ant-form-item {
margin-bottom: 5px;
}
</style>

159
src/views/apps/equipment/order/components/search.vue Normal file
View File

@@ -0,0 +1,159 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-radio-group v-model:value="listType" @change="handleTabs">
<a-radio-button :value="0">全部订单</a-radio-button>
<a-radio-button :value="1">待发货</a-radio-button>
<a-radio-button :value="2">待收货</a-radio-button>
<a-radio-button :value="3">待付款</a-radio-button>
<a-radio-button :value="4">已完成</a-radio-button>
<a-radio-button :value="5">已取消</a-radio-button>
</a-radio-group>
<a-button
danger
type="primary"
class="ele-btn-icon"
:disabled="selection.length === 0"
@click="removeBatch"
>
<template #icon>
<delete-outlined />
</template>
<span>批量删除</span>
</a-button>
<a-range-picker
v-model:value="dateRange"
value-format="YYYY-MM-DD"
class="ele-fluid"
/>
<a-input-search
allow-clear
placeholder="请输入关键词"
v-model:value="searchText"
@pressEnter="search"
@search="search"
>
<template #addonBefore>
<a-select v-model:value="type" style="width: 100px; margin: -5px -12px">
<a-select-option value="keywords">模糊搜索</a-select-option>
<a-select-option value="orderNo">订单号</a-select-option>
<a-select-option value="merchantCode">商户编号</a-select-option>
<a-select-option value="userId">用户ID</a-select-option>
</a-select>
</template>
</a-input-search>
</a-space>
</template>
<script lang="ts" setup>
import useSearch from '@/utils/use-search';
import { ref, watch } from 'vue';
import { OrderParam } from '@/api/order/model';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: OrderParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'advanced'): void;
}>();
// 表单数据
const { where, resetFields } = useSearch<OrderParam>({
orderNo: undefined,
userId: undefined,
payStatus: undefined,
deliveryStatus: undefined,
orderStatus: undefined
});
// 下来选项
const type = ref('keywords');
// 搜索内容
const searchText = ref('');
// 日期范围选择
const dateRange = ref<[string, string]>(['', '']);
const listType = ref<number>(0);
/* 搜索 */
const search = () => {
const [d1, d2] = dateRange.value ?? [];
if (type.value == 'orderNo') {
where.orderNo = searchText.value;
where.userId = undefined;
}
if (type.value == 'userId') {
where.userId = searchText.value;
where.orderNo = undefined;
}
if (type.value == 'merchantCode') {
where.merchantCode = searchText.value;
where.orderNo = undefined;
}
if (type.value == 'keywords') {
where.keywords = searchText.value;
}
emit('search', {
...where,
createTimeStart: d1 ? d1 + ' 00:00:00' : '',
createTimeEnd: d2 ? d2 + ' 23:59:59' : ''
});
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
const handleTabs = (e) => {
resetFields();
const listType = Number(e.target.value);
// 全部订单
if (listType == 0) {
console.log('全部订单');
}
// 待发货
if (listType == 1) {
console.log('待发货');
where.payStatus = 20;
where.deliveryStatus = 10;
}
// 待收货
if (listType == 2) {
console.log('待发货');
where.payStatus = 20;
where.deliveryStatus = 20;
where.receiptStatus = 10;
}
// 待付款
if (listType == 3) {
console.log('待付款');
where.payStatus = 10;
}
// 已完成
if (listType == 4) {
console.log('已完成');
where.payStatus = 20;
where.orderStatus = 30;
}
// 已取消
if (listType == 5) {
console.log('已取消');
where.orderStatus = 20;
}
emit('search', {
...where
});
};
watch(
() => props.selection,
() => {}
);
</script>

564
src/views/apps/equipment/order/index.vue Normal file
View File

@@ -0,0 +1,564 @@
<template>
<div class="page">
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="orderId"
:columns="columns"
:datasource="datasource"
v-model:selection="selection"
:customRow="customRow"
tool-class="ele-toolbar-form"
:scroll="{ x: 1200 }"
class="sys-org-table"
:striped="true"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@advanced="openAdvanced"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'merchantName'">
<div style="display: flex; flex-direction: column">
<span>{{ record.merchantName }}</span>
<span class="ele-text-placeholder">
{{ record.merchantCode }}
</span>
</div>
</template>
<template v-if="column.key === 'totalPrice'">
<p>
<span class="ele-text-warning price-edit">
￥{{ record.totalPrice }}
</span>
<form-outlined
v-if="record.payStatus === 10"
@click="onEdit('totalPrice', record.totalPrice, record)"
/></p>
<p class="ele-text-placeholder"
>(含运费：￥{{ record.expressPrice }})</p
>
</template>
<template v-if="column.key === 'goods'">
<template v-if="record.equipment">
<p class="ele-text">{{ record.equipment.equipmentName }}</p>
<p class="ele-text">{{ record.equipment.batteryModel }}</p>
<p class="ele-text">{{ record.equipment.equipmentCode }}</p>
</template>
</template>
<template v-if="column.key === 'payMethod'">
<a-tag v-if="record.payMethod === '10'" color="orange"
>余额支付</a-tag
>
<a-tag v-if="record.payMethod === '20'" color="green"
>微信支付</a-tag
>
<a-tag v-if="record.payMethod === '30'" color="blue"
>支付宝</a-tag
>
<a-tag v-if="record.payMethod === '40'" color="purple"
>通联支付</a-tag
>
</template>
<template v-if="column.key === 'deliveryType'">
<span v-if="record.deliveryType === 10">快递配送</span>
<span v-if="record.deliveryType === 20">门店自提</span>
</template>
<template v-if="column.key === 'payStatus'">
<div class="ele-text-placeholder">
付款状态：
<a-tag
v-if="record.payStatus === 10"
@click="onAlipayQuery(record.orderId)"
>未付款</a-tag
>
<a-tag v-if="record.payStatus === 20" color="green"
>已付款</a-tag
>
</div>
<div class="ele-text-placeholder">
发货状态：
<a-tag v-if="record.deliveryStatus === 10">未发货</a-tag>
<a-tag v-if="record.deliveryStatus === 20" color="success"
>已发货</a-tag
>
</div>
<div class="ele-text-placeholder">
收货状态：
<a-tag v-if="record.receiptStatus === 10">未收货</a-tag>
<a-tag v-if="record.receiptStatus === 20" color="success"
>已收货</a-tag
>
<a-tag v-if="record.receiptStatus === 30" color="error"
>已退租</a-tag
>
</div>
</template>
<template v-if="column.key === 'comments'">
<FormOutlined
@click="onEditContent('comments', record.comments, record)"
/>
<a-popover placement="topLeft">
<template #content>
<div class="comments">{{ record.comments }}</div>
</template>
{{ record.comments }}
</a-popover>
</template>
<template v-if="column.key === 'orderSourceData'">
<a-image-preview-group v-if="record.orderSourceData">
<a-image
:width="45"
v-for="(item, index) in JSON.parse(record.orderSourceData)"
:key="index"
:src="item"
/>
</a-image-preview-group>
<!-- <a-image-->
<!-- v-if="record.orderSourceData"-->
<!-- :src="JSON.parse(record.orderSourceData)"-->
<!-- :width="45"-->
<!-- />-->
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === '0'" color="green">正常</a-tag>
<a-tag v-if="record.status === '1'" color="red">禁用</a-tag>
</template>
<template v-if="column.key === 'orderSource'">
<a-tag v-if="Number(record.orderSource) === 10" color="success"
>销售</a-tag
>
<a-tag v-if="Number(record.orderSource) === 20" color="red"
>分期</a-tag
>
<a-tag v-if="Number(record.orderSource) === 30" color="orange"
>以租代购</a-tag
>
<a-tag v-if="Number(record.orderSource) === 40" color="blue"
>租赁</a-tag
>
<a-tag v-if="Number(record.orderSource) === 50" color="success"
>续租</a-tag
>
</template>
<template v-if="column.key === 'nickname'">
<User :record="record" />
</template>
<template v-if="column.key === 'createTime'">
{{ record.createTime }}
</template>
<template v-if="column.key === 'action'">
<a-space>
<!-- <a-button-->
<!-- @click="openDelivery(record)"-->
<!-- v-if="-->
<!-- record.orderStatus === 10 &&-->
<!-- record.payStatus === 20 &&-->
<!-- record.deliveryStatus === 10-->
<!-- "-->
<!-- >发货</a-button-->
<!-- >-->
<a-button @click="openInfo(record)">详情</a-button>
<!-- <a-divider type="vertical" />-->
<!-- <a-popconfirm-->
<!-- title="确定要删除此记录吗？"-->
<!-- @confirm="remove(record)"-->
<!-- >-->
<!-- <a class="ele-text-danger">删除</a>-->
<!-- </a-popconfirm>-->
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
<Delivery v-model:visible="deliveryEdit" :data="current" @done="reload" />
<Markdown
v-model:visible="showMarkdown"
:data="data"
:field="field"
:orderId="orderId"
:content="markdown"
@done="reload"
/>
<Field
v-model:visible="showEdit"
:data="data"
:field="field"
:orderId="orderId"
:content="content"
@done="reload"
/>
<!-- 编辑弹窗 -->
<!-- <order-edit v-model:visible="showEdit" :data="current" @done="reload" />-->
<!-- 用户详情 -->
<order-info v-model:visible="showInfo" :data="current" @done="reload" />
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import {
// PlusOutlined,
// DeleteOutlined,
FormOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import Delivery from './components/delivery.vue';
import Markdown from './components/markdown.vue';
import Field from './components/field.vue';
// import OrderEdit from './components/order-edit.vue';
import OrderInfo from './components/order-info.vue';
import { pageOrder, removeOrder, removeBatchOrder } from '@/api/order';
import { alipayQuery } from '@/api/system/payment';
import type { Order, OrderParam } from '@/api/order/model';
import { getDictionaryOptions } from '@/utils/common';
// import { useUserStore } from '@/store/modules/user';
// import { getDictionaryOptions } from '@/utils/common';
// 当前用户信息
// const userStore = useUserStore();
// const loginUser = computed(() => userStore.info ?? {});
// const orderType = localStorage.getItem('orderType');
defineProps<{
activeKey?: boolean;
data?: any;
}>();
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
/* 获取字典数据 */
const orderSource = getDictionaryOptions('equipmentCategory');
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
hideInTable: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '操作',
key: 'action',
width: 100,
align: 'center',
fixed: 'left',
hideInSetting: true
},
{
title: '订单号',
dataIndex: 'orderId',
key: 'orderId',
sorter: true
},
{
title: '商品编号',
dataIndex: 'goodsId',
key: 'goodsId'
},
{
title: '所属商户',
dataIndex: 'merchantName',
key: 'merchantName',
sorter: true
},
{
title: '下单方式',
key: 'orderSource',
dataIndex: 'orderSource',
filters: orderSource,
filterMultiple: false
},
{
title: '买家',
dataIndex: 'nickname',
key: 'nickname',
align: 'center'
},
{
title: '订单金额(元)',
dataIndex: 'totalPrice',
key: 'totalPrice',
ellipsis: true
},
{
title: '支付方式',
key: 'payMethod',
dataIndex: 'payMethod',
filters: [
{
text: '余额支付',
value: 10
},
{
text: '微信支付',
value: 20
},
{
text: '支付宝',
value: 30
},
{
text: '通联支付',
value: 40
}
],
filterMultiple: false
},
{
title: '备注',
dataIndex: 'comments',
key: 'comments',
ellipsis: true
},
// {
// title: '订单附件',
// dataIndex: 'orderSourceData',
// key: 'orderSourceData'
// },
{
title: '配送方式',
key: 'deliveryType',
dataIndex: 'deliveryType',
hideInTable: true,
filters: [
{
text: '快递配送',
value: 10
},
{
text: '门店自提',
value: 20
}
],
filterMultiple: false
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '交易状态',
key: 'payStatus',
dataIndex: 'payStatus',
fixed: 'right',
align: 'center',
filters: [
{
text: '未付款',
value: 10
},
{
text: '已付款',
value: 20
}
],
filterMultiple: false
}
]);
// 表格选中数据
const selection = ref<Order[]>([]);
// 当前编辑数据
const current = ref<Order | null>(null);
// 是否显示资产详情
const showInfo = ref(false);
// 是否显示编辑弹窗
const showEdit = ref(false);
const markdown = ref('请输入备注内容');
const content = ref('请输入要修改的内容');
const showMarkdown = ref(false);
const deliveryEdit = ref(false);
const field = ref('comments');
const orderId = ref(undefined);
// 是否显示高级搜索
const showAdvancedSearch = ref(false);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
// 搜索条件
if (filters.payMethod) {
where.payMethod = filters.payMethod;
}
if (filters.deliveryType) {
where.deliveryType = filters.deliveryType;
}
if (filters.payStatus) {
where.payStatus = filters.payStatus;
}
if (filters.orderSource) {
where.orderSource = filters.orderSource;
}
where.tenantId = localStorage.getItem('tenantId');
where.isRenew = 0;
return pageOrder({
...where,
...orders,
page,
limit
});
};
/* 搜索 */
const reload = (where?: OrderParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
const onEdit = (name, text, item) => {
orderId.value = item.orderId;
field.value = name;
content.value = text;
showEdit.value = true;
};
const onEditContent = (name, text, item) => {
orderId.value = item.orderId;
field.value = name;
markdown.value = text;
showMarkdown.value = true;
};
const openDelivery = (row?: Order) => {
current.value = row ?? null;
deliveryEdit.value = true;
};
/* 打开编辑弹窗 */
const openEdit = (row?: Order) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
const openInfo = (row?: Order) => {
current.value = row ?? null;
showInfo.value = true;
};
/* 打开高级搜索 */
const openAdvanced = () => {
showAdvancedSearch.value = !showAdvancedSearch.value;
};
/* 支付宝统一收单交易查询 */
const onAlipayQuery = (orderNo) => {
alipayQuery(orderNo).then((res) => {
console.log(res);
});
};
/* 删除单个 */
const remove = (row: Order) => {
const hide = message.loading('请求中..', 0);
removeOrder(row.orderId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
console.log(selection.value);
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchOrder(selection.value.map((d) => d.orderId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 自定义行属性 */
const customRow = (record: Order) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openInfo(record);
}
};
};
</script>
<script lang="ts">
export default {
name: 'ShopOrderIndex'
};
</script>
<style lang="less" scoped>
p {
line-height: 0.8;
}
.sys-org-table :deep(.ant-table-body) {
overflow: auto !important;
overflow: overlay !important;
}
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
padding: 0 4px;
margin-bottom: 0;
}
.price-edit {
padding-right: 5px;
}
.comments {
max-width: 200px;
}
</style>

39
src/views/apps/equipment/record/components/category-select.vue Normal file
View File

@@ -0,0 +1,39 @@
<!-- 目录选择下拉框 -->
<template>
<a-tree-select
allow-clear
tree-default-expand-all
:placeholder="placeholder"
:value="value || undefined"
:tree-data="data"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
@update:value="updateValue"
/>
</template>
<script lang="ts" setup>
import type { Equipment } from '@/api/apps/equipment/model';
const emit = defineEmits<{
(e: 'update:value', value?: number): void;
}>();
withDefaults(
defineProps<{
// 选中的数据(v-modal)
value?: number;
// 提示信息
placeholder?: string;
// 文章分类
data: Equipment[];
}>(),
{
placeholder: '请选择上级分类'
}
);
/* 更新选中数据 */
const updateValue = (value?: number) => {
emit('update:value', value);
};
</script>

339
src/views/apps/equipment/record/components/edit.vue Normal file
View File

@@ -0,0 +1,339 @@
<!-- 用户编辑弹窗 -->
<template>
<a-drawer
:width="600"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑' : '新建'"
:body-style="{ paddingBottom: '8px' }"
:footer-style="{ textAlign: 'right' }"
@update:visible="updateVisible"
:maskClosable="isUpdate"
@ok="save"
>
<a-form
ref="formRef"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
:model="form"
:rules="rules"
>
<a-form-item label="选择设备" name="equipmentCode">
<EquipmentSelect
dict-code="equipmentCode"
placeholder="请选择设备"
v-model:value="form.equipmentCode"
/>
</a-form-item>
<a-form-item label="事件类型" name="eventType">
<DictSelect
dict-code="eventType"
v-model:value="form.eventType"
placeholder="选择事件类型"
/>
</a-form-item>
<!-- <a-form-item label="上传图片" name="images">-->
<!-- <ele-image-upload-->
<!-- v-model:value="images"-->
<!-- :limit="1"-->
<!-- :drag="true"-->
<!-- :multiple="true"-->
<!-- :upload-handler="uploadHandler"-->
<!-- @upload="onUpload"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="设备参数" name="params">
<a-textarea
:rows="10"
:maxlength="200"
placeholder="请输入备注"
v-model:value="form.params"
/>
</a-form-item>
</a-form>
<template #footer>
<a-space>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" @click="save">保存</a-button>
</a-space>
</template>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { EquipmentRecord } from '@/api/apps/equipment/record/model';
import {
addEquipmentRecord,
updateEquipmentRecord
} from '@/api/apps/equipment/record';
import { FormInstance, Rule, RuleObject } from 'ant-design-vue/es/form';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { uploadFile } from '@/api/system/file';
import { FILE_SERVER } from '@/config/setting';
import useFormData from '@/utils/use-form-data';
import { Category } from '@/api/goods/category/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import DictSelect from '@/components/DictSelect/index.vue';
import dayjs, { Dayjs } from 'dayjs';
// import MultiSpec from './MultiSpec.vue';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: EquipmentRecord | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
const disabled = ref(false);
// 选择日期
const batteryDeliveryTime = ref<Dayjs>();
const ctiveTime = ref<Dayjs>();
// 提交状态
const loading = ref(false);
// 已上传数据
const images = ref<ItemType[]>([]);
const formRef = ref<FormInstance | null>(null);
// 选项卡位置
// const activeKey = ref('1');
// 编辑器内容，双向绑定
const content = ref<any>('');
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<EquipmentRecord>({
id: undefined,
equipmentCode: undefined,
eventType: undefined,
comments: '',
sortNumber: 100,
status: 0,
merchantCode: undefined
});
/* 上传事件 */
const uploadHandler = (file: File) => {
const item: ItemType = {
file,
uid: (file as any).uid,
name: file.name
};
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return;
}
if (file.size / 1024 / 1024 > 2) {
message.error('大小不能超过 2MB');
return;
}
onUpload(item);
};
// 上传文件
const onUpload = (item) => {
const { file } = item;
uploadFile(file)
.then((data) => {
images.value.push({
uid: data.id,
url: FILE_SERVER + data.path,
status: 'done'
});
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
equipmentCode: [
{
required: true,
message: '请选择设备',
type: 'string',
trigger: 'blur'
}
],
eventType: [
{
required: true,
message: '请选择事件类型',
type: 'string',
trigger: 'blur'
}
],
params: [
{
required: true,
message: '请填写设备参数',
type: 'string',
trigger: 'blur'
}
],
status: [
{
required: true,
type: 'number',
message: '请选择设备状态',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
type: 'number',
message: '请输入排序号',
trigger: 'blur'
}
],
// images: [
// {
// required: true,
// type: 'string',
// message: '请选择设备图片',
// trigger: 'blur',
// validator: async (_rule: RuleObject, value: string) => {
// if (images.value.length == 0) {
// return Promise.reject('请上传设备图片');
// }
// return Promise.resolve();
// }
// }
// ],
content: [
{
required: true,
type: 'string',
message: '请输入文章内容',
trigger: 'blur',
validator: async (_rule: RuleObject, value: string) => {
if (content.value == '') {
return Promise.reject('请输入文字内容');
}
return Promise.resolve();
}
}
]
});
/* 控制放店开关 */
const editStatus = () => {
if (form.status == 0) {
form.status = 1;
} else {
form.status = 0;
}
updateEquipmentRecord(form)
.then(() => {
message.success('操作成功');
})
.catch((e) => {
message.error(e.message);
});
};
const onClose = () => {
updateVisible(false);
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
// 获取第一张图片作为封面图
images.value.map((d, i) => {
if (i === 0) {
form.image = d.url;
}
});
const equipmentFaultForm = {
...form,
files: JSON.stringify(images.value),
content: content.value,
batteryDeliveryTime: batteryDeliveryTime.value?.format(
'YYYY-MM-DD HH:mm:ss'
),
ctiveTime: ctiveTime.value?.format('YYYY-MM-DD HH:mm:ss')
};
const saveOrUpdate = isUpdate.value
? updateEquipmentRecord
: addEquipmentRecord;
saveOrUpdate(equipmentFaultForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data
});
if (props.data.batteryDeliveryTime) {
batteryDeliveryTime.value = dayjs(
props.data.batteryDeliveryTime,
'YYYY-MM-DD'
);
ctiveTime.value = dayjs(props.data.ctiveTime, 'YYYY-MM-DD');
} else {
batteryDeliveryTime.value = undefined;
ctiveTime.value = undefined;
}
// images.value = JSON.parse(String(props.data.files));
content.value = props.data.content;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

144
src/views/apps/equipment/record/components/search.vue Normal file
View File

@@ -0,0 +1,144 @@
<!-- 搜索表单 -->
<template>
<a-space>
<!-- <a-button-->
<!-- type="primary"-->
<!-- class="ele-btn-icon"-->
<!-- v-permission="'apps:equipment:save'"-->
<!-- @click="add"-->
<!-- >-->
<!-- <template #icon>-->
<!-- <PlusOutlined />-->
<!-- </template>-->
<!-- <span>新建</span>-->
<!-- </a-button>-->
<a-button
danger
type="primary"
class="ele-btn-icon"
:v-role="`dev`"
@click="removeBatch"
v-if="props.selection.length > 0"
>
<template #icon>
<DeleteOutlined />
</template>
<span>批量删除</span>
</a-button>
<!-- <a-radio-group v-model:value="listType" @change="handleTabs">-->
<!-- <a-radio-button value="all">全部</a-radio-button>-->
<!-- <a-radio-button value="onSale">出售中</a-radio-button>-->
<!-- <a-radio-button value="offSale">已下架</a-radio-button>-->
<!-- <a-radio-button value="soldOut">已售罄</a-radio-button>-->
<!-- </a-radio-group>-->
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入搜索关键词"
@search="search"
@pressEnter="search"
>
<template #addonBefore>
<a-select v-model:value="type" style="width: 120px; margin: -5px -12px">
<a-select-option value="equipmentCode">设备编号</a-select-option>
<a-select-option value="equipmentName">设备名称</a-select-option>
<a-select-option value="userId">操作人ID</a-select-option>
</a-select>
</template>
</a-input-search>
<!-- <CustomerSelect-->
<!-- v-model:value="where.equipmentId"-->
<!-- :placeholder="`按设备筛选`"-->
<!-- @select="onSelect"-->
<!-- @clear="onClear"-->
<!-- />-->
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { EquipmentParam } from '@/api/apps/equipment/model';
// import CustomerSelect from '@/components/CustomerSelect/index.vue';
import { ref, watch } from 'vue';
const emit = defineEmits<{
(e: 'search', where?: EquipmentParam): void;
(e: 'add'): void;
(e: 'remove'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where, resetFields } = useSearch<EquipmentParam>({
equipmentId: undefined,
equipmentName: '',
equipmentCode: '',
userId: undefined
});
// 下来选项
const type = ref('equipmentCode');
// tabType
const listType = ref('all');
// 搜索内容
const searchText = ref('');
/* 搜索 */
const search = () => {
resetFields();
if (type.value == 'equipmentName') {
where.equipmentName = searchText.value;
}
if (type.value == 'equipmentCode') {
where.equipmentCode = searchText.value;
}
if (type.value == 'userId') {
where.userId = Number(searchText.value);
}
emit('search', where);
};
// const handleTabs = (e) => {
// listType.value = e.target.value;
// if (listType.value == 'all') {
// resetFields();
// }
// if (listType.value == 'onSale') {
// where.status = 0;
// }
// if (listType.value == 'offSale') {
// where.status = 1;
// }
// if (listType.value == 'soldOut') {
// where.stockTotal = 0;
// }
// emit('search', where);
// };
// 新增
const add = () => {
emit('add');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
/* 重置 */
// const reset = () => {
// resetFields();
// search();
// };
// 监听字典id变化
watch(
() => props.selection,
() => {}
);
</script>

299
src/views/apps/equipment/record/index.vue Normal file
View File

@@ -0,0 +1,299 @@
<template>
<div class="page">
<a-page-header :ghost="false" title="前世今生">
<div class="ele-text-secondary"> 记录设备的事件明细。 </div>
</a-page-header>
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="id"
:columns="columns"
:height="tableHeight"
:datasource="datasource"
v-model:selection="selection"
:scroll="{ x: 800 }"
>
<template #toolbar>
<search
:selection="selection"
@search="reload"
@add="openEdit"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="80" />
</template>
<template v-if="column.key === 'equipmentCode'">
<!-- <a @click="openEdit(record)">{{ record.equipmentCode }}</a>-->
<span>{{ record.equipmentCode }}</span>
</template>
<template v-if="column.key === 'eventType'">
{{ record.eventType }}
</template>
<template v-if="column.key === 'comments'">
<a-tooltip :title="record.comments" placement="topLeft">
{{ record.comments }}
</a-tooltip>
</template>
<template v-if="column.key === 'nickname'">
<a-tooltip
:title="`用户ID：${record.userId}`"
placement="topLeft"
>
{{ record.nickname }}
</a-tooltip>
</template>
<template v-if="column.key === 'params'">
<a-tooltip :title="record.params" placement="topLeft">
{{ record.params }}
</a-tooltip>
</template>
<template v-if="column.key === 'createTime'">
<a-tooltip :title="`${toDateString(record.createTime)}`">
{{ timeAgo(record.createTime) }}
</a-tooltip>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<Edit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</div>
</template>
<!--suppress TypeScriptValidateTypes -->
<script lang="ts" setup>
import { timeAgo } from 'ele-admin-pro';
import { createVNode, computed, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import Edit from './components/edit.vue';
import {
pageEquipmentRecord,
removeEquipmentRecord,
removeBatchEquipmentRecord
} from '@/api/apps/equipment/record';
import type {
EquipmentRecord,
EquipmentRecordParam
} from '@/api/apps/equipment/record/model';
import { Category } from '@/api/goods/category/model';
// import { getDictionaryOptions } from '@/utils/common';
// import { useUserStore } from '@/store/modules/user';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 当前用户信息
// const brand = getDictionaryOptions('serverBrand');
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '设备编号',
dataIndex: 'equipmentCode',
key: 'equipmentCode',
width: 180,
fixed: 'left'
},
{
title: '操作人',
dataIndex: 'nickname',
key: 'nickname',
width: 180,
ellipsis: true,
fixed: 'left'
},
{
title: '所属门店',
dataIndex: 'merchantName',
sorter: true,
width: 180,
ellipsis: true
},
{
title: '事件类型',
dataIndex: 'eventType',
key: 'eventType',
sorter: true,
width: 180,
ellipsis: true
},
{
title: '使用电池',
dataIndex: 'comments',
key: 'comments',
ellipsis: true
},
// {
// title: '设备参数',
// dataIndex: 'params',
// key: 'params',
// ellipsis: true
// },
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
width: 280,
customRender: ({ text }) => toDateString(text)
}
// {
// title: '操作',
// key: 'action',
// width: 200,
// align: 'center',
// hideInSetting: true
// }
]);
// 表格选中数据
const selection = ref<EquipmentRecord[]>([]);
// 当前编辑数据
const current = ref<EquipmentRecord | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 树形数据
const data = ref<Category[]>([]);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.brand = filters.brand;
}
return pageEquipmentRecord({ ...where, ...orders, page, limit });
};
/* 搜索 */
const reload = (where?: EquipmentRecordParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
// 搜索是否展开
const searchExpand = ref(false);
// 表格固定高度
const fixedHeight = ref(false);
// 表格高度
const tableHeight = computed(() => {
return fixedHeight.value
? searchExpand.value
? 'calc(100vh - 618px)'
: 'calc(100vh - 562px)'
: void 0;
});
/* 打开编辑弹窗 */
const openEdit = (row?: EquipmentRecord) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
const openInfo = (row?: EquipmentRecord) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 删除单个 */
const remove = (row: EquipmentRecord) => {
const hide = message.loading('请求中..', 0);
removeEquipmentRecord(row.id)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchEquipmentRecord(selection.value.map((d) => d.id))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
</script>
<script lang="ts">
export default {
name: 'EquipmentRecordIndex'
};
</script>
<style lang="less" scoped>
// 文字超出隐藏(两行)
// 需要设置文字容器的宽度
.twoline-hide {
width: 320px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
</style>

186
src/views/apps/equipment/renew/components/delivery.vue Normal file
View File

@@ -0,0 +1,186 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="500"
:visible="visible"
:confirm-loading="loading"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '发货' : '发货'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-space>
<a-form>
<a-form-item label="设备编码" v-bind="validateInfos.equipmentCode">
<a-input
allow-clear
:maxlength="30"
placeholder="请输入设备编码"
v-model:value="form.equipmentCode"
@blur="
validate('equipmentCode', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<!-- <a-row :gutter="16">-->
<!-- <a-col :md="12" :sm="24" :xs="24">-->
<!-- <a-form-item label="选择设备" v-bind="validateInfos.customerName">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- :maxlength="30"-->
<!-- placeholder="请选择设备"-->
<!-- v-model:value="form.customerName"-->
<!-- @blur="-->
<!-- validate('customerName', { trigger: 'blur' }).catch(() => {})-->
<!-- "-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- <a-col :md="12" :sm="24" :xs="24">-->
<!-- <a-form-item label="手机号码" v-bind="validateInfos.customerMobile">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- :maxlength="20"-->
<!-- placeholder="请填写联系人手机号码"-->
<!-- v-model:value="form.customerMobile"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- </a-row>-->
</a-form>
</a-space>
</ele-modal>
</template>
<script lang="ts" setup>
import {ref, reactive, watch, computed} from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import TypeSelect from './customer-edit/type-select.vue';
import ProgressSelect from './customer-edit/progress-select.vue';
import SourceSelect from './customer-edit/source-select.vue';
import { bindEquipment } from '@/api/apps/equipment';
import type { Customer } from '@/api/oa/customer/model';
import { createCode } from '@/utils/common';
import { uploadFile } from '@/api/system/file';
import type { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FILE_SERVER } from '@/config/setting';
import { useUserStore } from '@/store/modules/user';
import { Equipment } from "@/api/apps/equipment/model";
import { Order } from "@/api/order/model";
const userStore = useUserStore();
// 当前用户信息
const loginUser = computed(() => userStore.info ?? {});
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Order | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 用户信息
const form = reactive<Equipment>({
equipmentCode: '',
orderId: undefined
});
// 已上传数据, 可赋初始值用于回显
const images = ref(<any>[]);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
equipmentCode: [
{
required: true,
type: 'string',
message: '请输入设备编码',
trigger: 'blur'
}
]
});
const { resetFields, validate, validateInfos } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
// 去除空格
const data = {
...form,
orderId: props.data?.orderId,
userId: props.data?.userId
};
// 转字符串
bindEquipment(data)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
const onUpload = (d: ItemType) => {
uploadFile(<File>d.file)
.then((result) => {
form.customerAvatar = result.path;
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
// 头像赋值
images.value = [];
if(props.data.customerAvatar){
images.value.push({ uid:1, url: FILE_SERVER + props.data.customerAvatar, status: '' });
}
assignObject(form, props.data);
isUpdate.value = true;
} else {
form.customerCode = createCode();
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less"></style>

118
src/views/apps/equipment/renew/components/field.vue Normal file
View File

@@ -0,0 +1,118 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="500px"
:visible="visible"
:confirm-loading="loading"
:title="`修改价格`"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form layout="horizontal">
<a-form-item>
<a-input-number :min="0" style="width: 200px" v-model:value="content" />
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import { updateOrder } from '@/api/order';
import { Order } from '@/api/order/model';
import { createOrderNo } from "@/utils/common";
// import { reloadPageTab } from '@/utils/page-tab-util';
const useForm = Form.useForm;
// 是否是修改
const isUpdate = ref(false);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
data?: Order | null;
// 修改回显的数据
field?: string | null;
orderId?: number | 0;
content?: number | 0;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
const content = ref<number>(0);
const placeholder = ref('请输入订单金额');
// 用户信息
const form = reactive<Order>({
orderId: 0,
comments: '',
payPrice: undefined
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
const { resetFields, validate } = useForm(form);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
// 判断更新字段
form.orderId = props.orderId;
if (props.field === 'payPrice') {
form.payPrice = Number(content.value);
form.totalPrice = Number(content.value);
form.orderNo = createOrderNo();
}
updateOrder(form)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.orderId) {
loading.value = false;
content.value = props.content;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
if (props.field == 'tenantCode') {
placeholder.value = '请输入要绑定的主体编号';
content.value = undefined;
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
</style>

139
src/views/apps/equipment/renew/components/markdown.vue Normal file
View File

@@ -0,0 +1,139 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="600px"
:visible="visible"
:confirm-loading="loading"
:title="`修改内容`"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<!-- 编辑器 -->
<byte-md-editor
v-model:value="content"
:locale="zh_Hans"
:plugins="plugins"
uploadImages
height="300px"
:editorConfig="{ lineNumbers: true }"
/>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import { updateOrder } from '@/api/order';
import { Order } from '@/api/order/model';
// import { reloadPageTab } from '@/utils/page-tab-util';
import 'bytemd/dist/index.min.css';
import 'github-markdown-css/github-markdown-light.css';
// import TinymceEditor from '@/components/TinymceEditor/index.vue';
import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
import highlight from '@bytemd/plugin-highlight';
// 中文语言文件
import zh_Hans from 'bytemd/locales/zh_Hans.json';
// // 链接、删除线、复选框、表格等的插件
import gfm from '@bytemd/plugin-gfm';
// // 插件的中文语言文件
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
// // 预览界面的样式，这里用的 github 的 markdown 主题
import 'github-markdown-css/github-markdown-light.css';
const useForm = Form.useForm;
// 是否是修改
const isUpdate = ref(false);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
data?: Order | null;
// 修改回显的数据
field?: string | null;
content?: string;
orderId?: number;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 插件
const plugins = ref([
gfm({
locale: zh_HansGfm
}),
highlight()
]);
// 提交状态
const loading = ref(false);
const content = ref('');
// 用户信息
const form = reactive<Order>({
orderId: 0,
comments: ''
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
const { resetFields, validate } = useForm(form);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
// 判断更新字段
form.orderId = props.orderId;
if (props.field === 'content') {
form.comments = content.value;
}
if (props.field === 'comments') {
form.comments = content.value;
}
updateOrder(form)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
content.value = String(props.content);
console.log(visible);
if (visible) {
if (props.data) {
loading.value = false;
content.value = String(props.content);
assignObject(form, props.data);
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
</style>

289
src/views/apps/equipment/renew/components/order-edit.vue Normal file
View File

@@ -0,0 +1,289 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="680"
:visible="visible"
:confirm-loading="loading"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑订单' : '添加订单'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-space>
<a-form
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
>
<a-row :gutter="16">
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="订单名称" v-bind="validateInfos.customerName">
<a-input
allow-clear
:maxlength="30"
placeholder="请输入订单名称"
v-model:value="form.customerName"
@blur="
validate('customerName', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="订单标识" v-bind="validateInfos.customerCode">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入用户账号"
v-model:value="form.customerCode"
/>
</a-form-item>
<a-form-item label="跟进状态" v-bind="validateInfos.progress">
<progress-select
v-model:value="form.progress"
@blur="
validate('progress', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="订单类型" v-bind="validateInfos.customerType">
<type-select
v-model:value="form.customerType"
@blur="
validate('customerType', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="订单来源" v-bind="validateInfos.customerSource">
<source-select
v-model:value="form.customerSource"
@blur="
validate('customerSource', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="头像" v-bind="validateInfos.customerAvatar">
<ele-image-upload
v-model:value="images"
:item-style="{ width: '90px', height: '90px' }"
:limit="1"
@upload="onUpload"
/>
</a-form-item>
</a-col>
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="联系人" v-bind="validateInfos.customerContacts">
<a-input
allow-clear
:maxlength="20"
placeholder="请填写联系人"
v-model:value="form.customerContacts"
/>
</a-form-item>
<a-form-item label="手机号码" v-bind="validateInfos.customerMobile">
<a-input
allow-clear
:maxlength="20"
placeholder="请填写联系人手机号码"
v-model:value="form.customerMobile"
/>
</a-form-item>
<a-form-item
label="联系地址"
v-bind="validateInfos.customerAddress"
>
<a-input
allow-clear
placeholder="请填写联系地址"
v-model:value="form.customerAddress"
/>
</a-form-item>
<a-form-item label="公司座机" v-bind="validateInfos.customerPhone">
<a-input
allow-clear
:maxlength="20"
placeholder="请填写公司座机电话"
v-model:value="form.customerPhone"
/>
</a-form-item>
<a-form-item label="排序" v-bind="validateInfos.sortNumber">
<a-input
allow-clear
:maxlength="20"
placeholder="排序"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="备注" v-bind="validateInfos.comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入备注"
v-model:value="form.comments"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-space>
</ele-modal>
</template>
<script lang="ts" setup>
import {ref, reactive, watch, computed} from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import TypeSelect from './customer-edit/type-select.vue';
import ProgressSelect from './customer-edit/progress-select.vue';
import SourceSelect from './customer-edit/source-select.vue';
import { addCustomer, updateCustomer } from '@/api/oa/customer';
import type { Customer } from '@/api/oa/customer/model';
import { createCode } from '@/utils/common';
import { uploadFile } from '@/api/system/file';
import type { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FILE_SERVER } from '@/config/setting';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
// 当前用户信息
const loginUser = computed(() => userStore.info ?? {});
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Customer | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 用户信息
const form = reactive<Customer>({
customerCode: '',
customerName: '',
customerType: undefined,
progress: undefined,
customerMobile: '',
customerAvatar: '',
customerPhone: '',
customerContacts: '',
customerAddress: '',
comments: '',
status: '0',
sortNumber: 100,
customerId: 0,
userId: '',
});
// 已上传数据, 可赋初始值用于回显
const images = ref(<any>[]);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
customerName: [
{
required: true,
type: 'string',
message: '请输入订单名称',
trigger: 'blur'
}
],
customerCode: [
{
required: true,
type: 'string',
message: '请输入合法的IP地址',
trigger: 'blur'
}
],
progress: [
{
required: true,
type: 'string',
message: '请选择跟进状态',
trigger: 'blur'
}
]
});
const { resetFields, validate, validateInfos } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
// 去除空格
form.customerName = form.customerName?.replace(/\s*/g, '');
if(isUpdate.value == false) {
form.userId = loginUser.value.userId;
}
const data = {
...form
};
// 转字符串
const saveOrUpdate = isUpdate.value ? updateCustomer : addCustomer;
saveOrUpdate(data)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
const onUpload = (d: ItemType) => {
uploadFile(<File>d.file)
.then((result) => {
form.customerAvatar = result.path;
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
// 头像赋值
images.value = [];
if(props.data.customerAvatar){
images.value.push({ uid:1, url: FILE_SERVER + props.data.customerAvatar, status: '' });
}
assignObject(form, props.data);
isUpdate.value = true;
} else {
form.customerCode = createCode();
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less"></style>

164
src/views/apps/equipment/renew/components/search.vue Normal file
View File

@@ -0,0 +1,164 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-radio-group v-model:value="listType" @change="handleTabs">
<a-radio-button :value="0">全部订单</a-radio-button>
<a-radio-button :value="1">待发货</a-radio-button>
<a-radio-button :value="2">待收货</a-radio-button>
<a-radio-button :value="3">待付款</a-radio-button>
<a-radio-button :value="4">已完成</a-radio-button>
<a-radio-button :value="5">已取消</a-radio-button>
</a-radio-group>
<a-button
danger
type="primary"
class="ele-btn-icon"
:disabled="selection.length === 0"
@click="removeBatch"
>
<template #icon>
<delete-outlined />
</template>
<span>批量删除</span>
</a-button>
<a-range-picker
v-model:value="dateRange"
value-format="YYYY-MM-DD"
class="ele-fluid"
/>
<a-input-search
allow-clear
placeholder="请输入关键词"
v-model:value="searchText"
@pressEnter="search"
@search="search"
>
<template #addonBefore>
<a-select v-model:value="type" style="width: 100px; margin: -5px -12px">
<a-select-option value="orderNo">订单号</a-select-option>
<a-select-option value="merchantCode">商户编号</a-select-option>
<a-select-option value="userId">用户ID</a-select-option>
</a-select>
</template>
</a-input-search>
</a-space>
</template>
<script lang="ts" setup>
import {
PlusOutlined,
EditOutlined,
SearchOutlined,
DeleteOutlined,
UpSquareOutlined,
ShopOutlined,
DownSquareOutlined
} from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import { ref, watch } from 'vue';
import { OrderParam } from '@/api/order/model';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: OrderParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'advanced'): void;
}>();
// 表单数据
const { where, resetFields } = useSearch<OrderParam>({
orderNo: undefined,
userId: undefined,
payStatus: undefined,
deliveryStatus: undefined,
orderStatus: undefined
});
// 下来选项
const type = ref('orderNo');
// 搜索内容
const searchText = ref('');
// 日期范围选择
const dateRange = ref<[string, string]>(['', '']);
const listType = ref<number>(0);
/* 搜索 */
const search = () => {
const [d1, d2] = dateRange.value ?? [];
if (type.value == 'orderNo') {
where.orderNo = searchText.value;
where.userId = undefined;
}
if (type.value == 'userId') {
where.userId = searchText.value;
where.orderNo = undefined;
}
if (type.value == 'merchantCode') {
where.merchantCode = searchText.value;
where.orderNo = undefined;
}
emit('search', {
...where,
createTimeStart: d1 ? d1 + ' 00:00:00' : '',
createTimeEnd: d2 ? d2 + ' 23:59:59' : ''
});
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
const handleTabs = (e) => {
resetFields();
const listType = Number(e.target.value);
// 全部订单
if (listType == 0) {
console.log('全部订单');
}
// 待发货
if (listType == 1) {
console.log('待发货');
where.payStatus = 20;
where.deliveryStatus = 10;
}
// 待收货
if (listType == 2) {
console.log('待发货');
where.payStatus = 20;
where.deliveryStatus = 20;
where.receiptStatus = 10;
}
// 待付款
if (listType == 3) {
console.log('待付款');
where.payStatus = 10;
}
// 已完成
if (listType == 4) {
console.log('已完成');
where.payStatus = 20;
where.orderStatus = 30;
}
// 已取消
if (listType == 5) {
console.log('已取消');
where.orderStatus = 20;
}
emit('search', {
...where
});
};
watch(
() => props.selection,
() => {}
);
</script>

494
src/views/apps/equipment/renew/index.vue Normal file
View File

@@ -0,0 +1,494 @@
<template>
<div class="page">
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="orderId"
:columns="columns"
:datasource="datasource"
v-model:selection="selection"
tool-class="ele-toolbar-form"
:scroll="{ x: 2000 }"
class="sys-org-table"
:striped="true"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@advanced="openAdvanced"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'orderName'">
<a-tooltip title="查看详情">
<a href="#" @click="openInfo(record)">{{ record.orderName }}</a>
</a-tooltip>
</template>
<template v-if="column.key === 'merchantName'">
<div style="display: flex; flex-direction: column">
<span>{{ record.merchantName }}</span>
<span class="ele-text-placeholder">
{{ record.merchantCode }}
</span>
</div>
</template>
<template v-if="column.key === 'payPrice'">
<p>
<span class="ele-text-warning price-edit">
￥{{ record.payPrice }}
</span>
<form-outlined
v-if="record.payStatus === 10"
@click="onEdit('payPrice', record.payPrice, record)"
/></p>
<p class="ele-text-placeholder"
>(含运费：￥{{ record.expressPrice }})</p
>
</template>
<template v-if="column.key === 'goods'">
<template v-if="record.equipment">
<p class="ele-text">{{ record.equipment.equipmentName }}</p>
<p class="ele-text">{{ record.equipment.batteryModel }}</p>
<p class="ele-text">{{ record.equipment.equipmentCode }}</p>
</template>
</template>
<template v-if="column.key === 'payMethod'">
<a-tag v-if="record.payMethod === '10'" color="orange"
>余额支付</a-tag
>
<a-tag v-if="record.payMethod === '20'" color="green"
>微信支付</a-tag
>
<a-tag v-if="record.payMethod === '30'" color="blue"
>支付宝</a-tag
>
<a-tag v-if="record.payMethod === '40'" color="purple"
>通联支付</a-tag
>
</template>
<template v-if="column.key === 'deliveryType'">
<span v-if="record.deliveryType === 10">快递配送</span>
<span v-if="record.deliveryType === 20">门店自提</span>
</template>
<template v-if="column.key === 'payStatus'">
<div class="ele-text-placeholder">
付款状态：
<a-tag
v-if="record.payStatus === 10"
@click="onAlipayQuery(record.orderId)"
>未付款</a-tag
>
<a-tag v-if="record.payStatus === 20" color="green"
>已付款</a-tag
>
</div>
<div class="ele-text-placeholder">
发货状态：
<a-tag v-if="record.deliveryStatus === 10">未发货</a-tag>
<a-tag v-if="record.deliveryStatus === 20" color="success"
>已发货</a-tag
>
</div>
<div class="ele-text-placeholder">
收货状态：
<a-tag v-if="record.receiptStatus === 10">未收货</a-tag>
<a-tag v-if="record.receiptStatus === 20" color="success"
>已收货</a-tag
>
</div>
</template>
<template v-if="column.key === 'orderSourceData'">
<a-image-preview-group v-if="record.orderSourceData">
<a-image
:width="45"
v-for="item in JSON.parse(record.orderSourceData)"
:src="item"
/>
</a-image-preview-group>
<!-- <a-image-->
<!-- v-if="record.orderSourceData"-->
<!-- :src="JSON.parse(record.orderSourceData)"-->
<!-- :width="45"-->
<!-- />-->
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === '0'" color="green">正常</a-tag>
<a-tag v-if="record.status === '1'" color="red">禁用</a-tag>
</template>
<template v-if="column.key === 'orderSource'">
<a-tag v-if="Number(record.orderSource) === 10" color="success"
>销售</a-tag
>
<a-tag v-if="Number(record.orderSource) === 20" color="red"
>分期</a-tag
>
<a-tag v-if="Number(record.orderSource) === 30" color="orange"
>以租代购</a-tag
>
<a-tag v-if="Number(record.orderSource) === 40" color="blue"
>租赁</a-tag
>
</template>
<template v-if="column.key === 'nickname'">
<a-tooltip :title="`用户ID：${record.userId}`">
<a-avatar :src="record.avatar" size="small" />
<span style="padding-left: 4px">{{ record.nickname }}</span>
</a-tooltip>
</template>
<template v-if="column.key === 'createTime'">
{{ record.createTime }}
</template>
<template v-if="column.key === 'action'">
<a-space>
<a-button
@click="openDelivery(record)"
v-if="
record.orderStatus === 10 &&
record.payStatus === 20 &&
record.deliveryStatus === 10
"
>发货</a-button
>
<!-- <a-divider type="vertical" />-->
<!-- <a-popconfirm-->
<!-- title="确定要删除此记录吗？"-->
<!-- @confirm="remove(record)"-->
<!-- >-->
<!-- <a class="ele-text-danger">删除</a>-->
<!-- </a-popconfirm>-->
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
<Delivery v-model:visible="deliveryEdit" :data="current" @done="reload" />
<Markdown
v-model:visible="showMarkdown"
:data="data"
:field="field"
:orderId="orderId"
:content="markdown"
@done="reload"
/>
<Field
v-model:visible="showEdit"
:data="data"
:field="field"
:orderId="orderId"
:content="content"
@done="reload"
/>
<!-- 编辑弹窗 -->
<!-- <order-edit v-model:visible="showEdit" :data="current" @done="reload" />-->
<!-- 用户详情 -->
<!-- <order-info v-model:visible="showInfo" :data="current" @done="reload" />-->
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import {
// PlusOutlined,
// DeleteOutlined,
FormOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import Delivery from './components/delivery.vue';
import Markdown from './components/markdown.vue';
import Field from './components/field.vue';
// import OrderEdit from './components/order-edit.vue';
// import OrderInfo from './components/order-info.vue';
import { pageOrder, removeOrder, removeBatchOrder } from '@/api/order';
import { alipayQuery } from '@/api/system/payment';
import type { Order, OrderParam } from '@/api/order/model';
import { getDictionaryOptions } from '@/utils/common';
// import { useUserStore } from '@/store/modules/user';
// import { getDictionaryOptions } from '@/utils/common';
// 当前用户信息
// const userStore = useUserStore();
// const loginUser = computed(() => userStore.info ?? {});
// const orderType = localStorage.getItem('orderType');
const props = defineProps<{
activeKey?: boolean;
data?: any;
}>();
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
/* 获取字典数据 */
const orderSource = getDictionaryOptions('equipmentCategory');
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '操作',
key: 'action',
width: 100,
align: 'center',
fixed: 'left',
hideInSetting: true
},
{
title: '订单号',
dataIndex: 'orderNo',
key: 'orderNo'
},
{
title: '所属商户',
dataIndex: 'merchantName',
key: 'merchantName',
sorter: true
},
{
title: '买家',
dataIndex: 'nickname',
key: 'nickname',
align: 'center'
},
{
title: '实付款(元)',
dataIndex: 'payPrice',
key: 'payPrice',
ellipsis: true
},
{
title: '支付方式',
key: 'payMethod',
dataIndex: 'payMethod',
filters: [
{
text: '余额支付',
value: 10
},
{
text: '微信支付',
value: 20
},
{
text: '支付宝',
value: 30
},
{
text: '通联支付',
value: 40
}
],
filterMultiple: false
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '交易状态',
key: 'payStatus',
dataIndex: 'payStatus',
fixed: 'right',
align: 'center',
filters: [
{
text: '未付款',
value: 10
},
{
text: '已付款',
value: 20
}
],
filterMultiple: false
}
]);
// 表格选中数据
const selection = ref<Order[]>([]);
// 当前编辑数据
const current = ref<Order | null>(null);
// 是否显示资产详情
const showInfo = ref(false);
// 是否显示编辑弹窗
const showEdit = ref(false);
const markdown = ref('请输入备注内容');
const content = ref('请输入要修改的内容');
const showMarkdown = ref(false);
const deliveryEdit = ref(false);
const field = ref('comments');
const orderId = ref(undefined);
// 是否显示高级搜索
const showAdvancedSearch = ref(false);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
// 搜索条件
if (filters.payMethod) {
where.payMethod = filters.payMethod;
}
if (filters.deliveryType) {
where.deliveryType = filters.deliveryType;
}
if (filters.payStatus) {
where.payStatus = filters.payStatus;
}
if (filters.orderSource) {
where.orderSource = filters.orderSource;
}
where.tenantId = localStorage.getItem('tenantId');
// 续费订单
where.isRenew = 1;
return pageOrder({
...where,
...orders,
page,
limit
});
};
/* 搜索 */
const reload = (where?: OrderParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
const onEdit = (name, text, item) => {
orderId.value = item.orderId;
field.value = name;
content.value = text;
showEdit.value = true;
};
const onEditContent = (name, text, item) => {
orderId.value = item.orderId;
field.value = name;
markdown.value = text;
showMarkdown.value = true;
};
const openDelivery = (row?: Order) => {
current.value = row ?? null;
deliveryEdit.value = true;
};
/* 打开编辑弹窗 */
const openEdit = (row?: Order) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
const openInfo = (row?: Order) => {
current.value = row ?? null;
showInfo.value = true;
};
/* 打开高级搜索 */
const openAdvanced = () => {
showAdvancedSearch.value = !showAdvancedSearch.value;
};
/* 支付宝统一收单交易查询 */
const onAlipayQuery = (orderNo) => {
alipayQuery(orderNo).then((res) => {
console.log(res);
});
};
/* 删除单个 */
const remove = (row: Order) => {
const hide = message.loading('请求中..', 0);
removeOrder(row.orderId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
console.log(selection.value);
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchOrder(selection.value.map((d) => d.orderId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
</script>
<script lang="ts">
export default {
name: 'ShopOrderIndex'
};
</script>
<style lang="less" scoped>
p {
line-height: 0.8;
}
.sys-org-table :deep(.ant-table-body) {
overflow: auto !important;
overflow: overlay !important;
}
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
padding: 0 4px;
margin-bottom: 0;
}
.price-edit {
padding-right: 5px;
}
</style>

20
src/views/apps/home/index.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div class="ele-body">
<a-page-header :ghost="false" title="网站首页">
<div class="ele-text-secondary">
任务管理模块，帮助你组织工作进行有效的协作。
</div>
</a-page-header>
<a-card :bordered="false">
<div>Test</div>
</a-card>
</div>
</template>
<script lang="ts" setup></script>
<script lang="ts">
export default {
name: 'DemoTest'
};
</script>

39
src/views/apps/hualala/card-benefits/components/category-select.vue Normal file
View File

@@ -0,0 +1,39 @@
<!-- 目录选择下拉框 -->
<template>
<a-tree-select
allow-clear
tree-default-expand-all
:placeholder="placeholder"
:value="value || undefined"
:tree-data="data"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
@update:value="updateValue"
/>
</template>
<script lang="ts" setup>
import type { Equipment } from '@/api/apps/equipment/model';
const emit = defineEmits<{
(e: 'update:value', value?: number): void;
}>();
withDefaults(
defineProps<{
// 选中的数据(v-modal)
value?: number;
// 提示信息
placeholder?: string;
// 文章分类
data: Equipment[];
}>(),
{
placeholder: '请选择上级分类'
}
);
/* 更新选中数据 */
const updateValue = (value?: number) => {
emit('update:value', value);
};
</script>

653
src/views/apps/hualala/card-benefits/components/edit.vue Normal file
View File

@@ -0,0 +1,653 @@
<!-- 用户编辑弹窗 -->
<template>
<a-drawer
:width="880"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑设备' : '添加设备'"
:body-style="{ paddingBottom: '8px' }"
:footer-style="{ textAlign: 'right' }"
@update:visible="updateVisible"
:maskClosable="isUpdate"
@ok="save"
>
<a-form
ref="formRef"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
:model="form"
:rules="rules"
>
<a-row :gutter="16">
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="所属商户" name="merchantCode">
<MerchantSelect
dict-code="equipmentModel"
placeholder="请选择所属商户"
v-model:value="form.merchantCode"
/>
</a-form-item>
<a-form-item label="设备名称" name="equipmentName">
<DictSelect
dict-code="equipmentName"
placeholder="请选择设备"
v-model:value="form.equipmentName"
/>
</a-form-item>
<a-form-item label="设备分类" name="equipmentCategory">
<DictSelect
dict-code="equipmentCategory"
placeholder="请选择电池型号"
v-model:value="form.equipmentCategory"
/>
</a-form-item>
<a-form-item label="电池型号" name="batteryModel">
<DictSelect
dict-code="equipmentModel"
placeholder="请选择电池型号"
v-model:value="form.batteryModel"
/>
</a-form-item>
<a-form-item label="工作状态" name="workingStatus">
<DictSelect
dict-code="workingStatus"
v-model:value="form.workingStatus"
placeholder="选择工作状态"
/>
</a-form-item>
<a-form-item label="电池状态" name="batteryStatus">
<DictSelect
dict-code="batteryStatus"
v-model:value="form.batteryStatus"
placeholder="选择电池状态"
/>
</a-form-item>
<a-form-item label="是否在线" name="isOnline">
<DictSelect
dict-code="isOnline"
v-model:value="form.isOnline"
placeholder="是否在线"
/>
</a-form-item>
<a-form-item label="BMS板供应商" name="bmsBrand">
<DictSelect
dict-code="bmsBrand"
v-model:value="form.bmsBrand"
placeholder="选择供应商"
/>
</a-form-item>
<a-form-item label="ICCID" name="iccid">
<a-input
allow-clear
placeholder="请输入剩余容量"
v-model:value="form.iccid"
/>
</a-form-item>
<a-form-item label="电池出厂时间" name="batteryDeliveryTime">
<a-date-picker
class="ele-fluid"
placeholder="请选择时间"
v-model:value="batteryDeliveryTime"
/>
</a-form-item>
</a-col>
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="设备编码" name="equipmentCode">
<a-input
allow-clear
placeholder="请输入设备编码"
:disabled="isUpdate"
v-model:value="form.equipmentCode"
/>
</a-form-item>
<a-form-item label="bms" name="bms">
<a-input
allow-clear
placeholder="请输入设备BMS"
v-model:value="form.bms"
/>
</a-form-item>
<a-form-item label="是否激活" name="isCtive">
<DictSelect
dict-code="ctiveStatus"
v-model:value="form.isCtive"
placeholder="是否激活"
/>
</a-form-item>
<a-form-item label="租赁状态" name="leaseStatus">
<DictSelect
dict-code="leaseStatus"
v-model:value="form.leaseStatus"
placeholder="是否激活"
/>
</a-form-item>
<a-form-item label="电池电量" name="batteryPower">
<a-input
allow-clear
placeholder="请输入电池电量"
v-model:value="form.batteryPower"
/>
</a-form-item>
<a-form-item label="总电压" name="totalVoltage">
<a-input
allow-clear
placeholder="请输入总电压"
v-model:value="form.totalVoltage"
/>
</a-form-item>
<a-form-item label="剩余容量" name="surplusCapacity">
<a-input
allow-clear
placeholder="请输入剩余容量"
v-model:value="form.surplusCapacity"
/>
</a-form-item>
<a-form-item label="设备激活时间" name="ctiveTime">
<a-date-picker
class="ele-fluid"
placeholder="请选择时间"
v-model:value="ctiveTime"
/>
</a-form-item>
<a-form-item label="设备开关" name="status">
<a-switch :checked="form.status === 0" @change="editStatus" />
</a-form-item>
</a-col>
</a-row>
<!-- <a-form-item label="设备图片" name="images">-->
<!-- <ele-image-upload-->
<!-- v-model:value="images"-->
<!-- :limit="14"-->
<!-- :drag="true"-->
<!-- :multiple="true"-->
<!-- :upload-handler="uploadHandler"-->
<!-- @upload="onUpload"-->
<!-- />-->
<!-- </a-form-item>-->
</a-form>
<template #footer>
<a-space>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" @click="save">保存</a-button>
</a-space>
</template>
<!-- <a-tabs v-model:activeKey="activeKey" type="card">-->
<!-- <a-tab-pane key="1" tab="基本信息" />-->
<!-- <a-tab-pane key="2" tab="设备详情">-->
<!-- <a-form-->
<!-- ref="formRef"-->
<!-- :label-col="{ md: { span: 8 }, sm: { span: 24 } }"-->
<!-- :wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"-->
<!-- layout="vertical"-->
<!-- :model="form"-->
<!-- :rules="rules"-->
<!-- >-->
<!-- <a-form-item label="" name="content">-->
<!-- &lt;!&ndash; 编辑器 &ndash;&gt;-->
<!-- <tinymce-editor-->
<!-- v-model:value="content"-->
<!-- :disabled="disabled"-->
<!-- :init="config"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-form>-->
<!-- </a-tab-pane>-->
<!-- </a-tabs>-->
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { Equipment } from '@/api/apps/equipment/model';
import { addEquipment, updateEquipment } from '@/api/apps/equipment';
import { FormInstance, Rule, RuleObject } from 'ant-design-vue/es/form';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { uploadFile } from '@/api/system/file';
import { FILE_SERVER, FILE_THUMBNAIL } from '@/config/setting';
import useFormData from '@/utils/use-form-data';
import TinymceEditor from '@/components/TinymceEditor/index.vue';
import { Category } from '@/api/goods/category/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import DictSelect from '@/components/DictSelect/index.vue';
import MerchantSelect from '@/components/MerchantSelect/index.vue';
import { createCode } from '@/utils/common';
import dayjs, { Dayjs } from 'dayjs';
// import MultiSpec from './MultiSpec.vue';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Equipment | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
const disabled = ref(false);
// 选择日期
const batteryDeliveryTime = ref<Dayjs>();
const ctiveTime = ref<Dayjs>();
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
// 提交状态
const loading = ref(false);
// 已上传数据
const images = ref<ItemType[]>([]);
const formRef = ref<FormInstance | null>(null);
// 选项卡位置
// const activeKey = ref('1');
// 编辑器内容，双向绑定
const content = ref<any>('');
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<Equipment>({
equipmentType: 1,
equipmentName: undefined,
equipmentCode: `E${createCode()}`,
batteryModel: undefined,
equipmentCategory: undefined,
bms: undefined,
isCtive: undefined,
workingStatus: undefined,
leaseStatus: undefined,
batteryStatus: undefined,
batteryPower: undefined,
isOnline: undefined,
totalVoltage: undefined,
bmsBrand: undefined,
surplusCapacity: undefined,
iccid: undefined,
ctiveTime: undefined,
batteryDeliveryTime: undefined,
image: '',
files: '',
createTime: '',
comments: '',
sortNumber: 100,
status: 0,
equipmentId: 0,
content: '',
merchantCode: undefined
});
/* 上传事件 */
const uploadHandler = (file: File) => {
const item: ItemType = {
file,
uid: (file as any).uid,
name: file.name
};
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return;
}
if (file.size / 1024 / 1024 > 2) {
message.error('大小不能超过 2MB');
return;
}
onUpload(item);
};
// 上传文件
const onUpload = (item) => {
const { file } = item;
uploadFile(file)
.then((data) => {
images.value.push({
uid: data.id,
url: FILE_THUMBNAIL + data.path,
status: 'done'
});
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
merchantCode: [
{
required: true,
message: '请选择商户',
type: 'string',
trigger: 'blur'
}
],
equipmentName: [
{
required: true,
message: '请输入设备名称',
type: 'string',
trigger: 'blur'
}
],
batteryModel: [
{
required: true,
type: 'string',
message: '请选择电池型号',
trigger: 'blur'
}
],
equipmentCategory: [
{
required: true,
type: 'string',
message: '请选择设备分类',
trigger: 'blur'
}
],
equipmentCode: [
{
required: true,
type: 'string',
message: '请填写设备编号',
trigger: 'blur'
}
],
isCtive: [
{
required: true,
type: 'string',
message: '请选择是否激活',
trigger: 'blur'
}
],
equipmentType: [
{
required: true,
type: 'number',
message: '请选择设备类型',
trigger: 'blur'
}
],
deliveryType: [
{
required: true,
type: 'number',
message: '请选择配送方式',
trigger: 'blur'
}
],
equipmentPriceMin: [
{
required: true,
type: 'number',
message: '请输入设备价格',
trigger: 'blur'
}
],
stockTotal: [
{
required: true,
type: 'number',
message: '请输入设备库存',
trigger: 'blur'
}
],
specType: [
{
required: true,
type: 'number',
message: '请选择规格类型',
trigger: 'blur'
}
],
deliveryId: [
{
required: true,
type: 'number',
message: '请选择运费模板',
trigger: 'blur'
}
],
status: [
{
required: true,
type: 'number',
message: '请选择设备状态',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
type: 'number',
message: '请输入排序号',
trigger: 'blur'
}
],
deductStockType: [
{
required: true,
type: 'number',
message: '请设置库存计算方式',
trigger: 'blur'
}
],
purchaseLimit: [
{
required: true,
type: 'number',
message: '请设置是否限购',
trigger: 'blur'
}
],
// images: [
// {
// required: true,
// type: 'string',
// message: '请选择设备图片',
// trigger: 'blur',
// validator: async (_rule: RuleObject, value: string) => {
// if (images.value.length == 0) {
// return Promise.reject('请上传设备图片');
// }
// return Promise.resolve();
// }
// }
// ],
customerId: [
{
required: true,
type: 'number',
message: '请选择客户'
}
],
linePriceMin: [
{
required: true,
type: 'number',
message: '请输入设备划线价',
trigger: 'blur'
}
],
content: [
{
required: true,
type: 'string',
message: '请输入文章内容',
trigger: 'blur',
validator: async (_rule: RuleObject, value: string) => {
if (content.value == '') {
return Promise.reject('请输入文字内容');
}
return Promise.resolve();
}
}
],
brand: [
{
required: true,
type: 'string',
message: '请选项设备厂商',
trigger: 'blur'
}
]
});
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
const config = ref({
height: 500,
// 自定义文件上传(这里使用把选择的文件转成 blob 演示)
file_picker_callback: (callback: any, _value: any, meta: any) => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
// 设定文件可选类型
if (meta.filetype === 'image') {
input.setAttribute('accept', 'image/*');
} else if (meta.filetype === 'media') {
input.setAttribute('accept', 'video/*');
}
input.onchange = () => {
const file = input.files?.[0];
if (!file) {
return;
}
if (meta.filetype === 'media') {
if (!file.type.startsWith('video/')) {
editorRef.value?.alert({ content: '只能选择视频文件' });
return;
}
}
if (file.size / 1024 / 1024 > 20) {
editorRef.value?.alert({ content: '大小不能超过 20MB' });
return;
}
const reader = new FileReader();
reader.onload = (e) => {
if (e.target?.result != null) {
const blob = new Blob([e.target.result], { type: file.type });
callback(URL.createObjectURL(blob));
}
};
reader.readAsArrayBuffer(file);
};
input.click();
}
});
/* 控制放店开关 */
const editStatus = () => {
if (form.status == 0) {
form.status = 1;
} else {
form.status = 0;
}
updateEquipment(form)
.then(() => {
message.success('操作成功');
})
.catch((e) => {
message.error(e.message);
});
};
const onClose = () => {
updateVisible(false);
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
// 获取第一张图片作为封面图
images.value.map((d, i) => {
if (i === 0) {
form.image = d.url;
}
});
const equipmentForm = {
...form,
files: JSON.stringify(images.value),
content: content.value,
batteryDeliveryTime: batteryDeliveryTime.value?.format(
'YYYY-MM-DD HH:mm:ss'
),
ctiveTime: ctiveTime.value?.format('YYYY-MM-DD HH:mm:ss')
};
const saveOrUpdate = isUpdate.value ? updateEquipment : addEquipment;
saveOrUpdate(equipmentForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data
});
if (props.data.batteryDeliveryTime) {
batteryDeliveryTime.value = dayjs(
props.data.batteryDeliveryTime,
'YYYY-MM-DD'
);
ctiveTime.value = dayjs(props.data.ctiveTime, 'YYYY-MM-DD');
} else {
batteryDeliveryTime.value = undefined;
ctiveTime.value = undefined;
}
// images.value = JSON.parse(String(props.data.files));
content.value = props.data.content;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

141
src/views/apps/hualala/card-benefits/components/search.vue Normal file
View File

@@ -0,0 +1,141 @@
<!-- 搜索表单 -->
<template>
<a-space>
<a-button
type="primary"
class="ele-btn-icon"
v-permission="'apps:equipment:save'"
@click="add"
>
<template #icon>
<PlusOutlined />
</template>
<span>新建</span>
</a-button>
<a-button
danger
type="primary"
class="ele-btn-icon"
:v-role="`dev`"
@click="removeBatch"
v-if="props.selection.length > 0"
>
<template #icon>
<DeleteOutlined />
</template>
<span>批量删除</span>
</a-button>
<!-- <a-radio-group v-model:value="listType" @change="handleTabs">-->
<!-- <a-radio-button value="all">全部</a-radio-button>-->
<!-- <a-radio-button value="onSale">出售中</a-radio-button>-->
<!-- <a-radio-button value="offSale">已下架</a-radio-button>-->
<!-- <a-radio-button value="soldOut">已售罄</a-radio-button>-->
<!-- </a-radio-group>-->
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入搜索关键词"
@search="search"
@pressEnter="search"
>
<template #addonBefore>
<a-select v-model:value="type" style="width: 120px; margin: -5px -12px">
<a-select-option value="cardLevelName">等级名称</a-select-option>
<a-select-option value="name">权益</a-select-option>
</a-select>
</template>
</a-input-search>
<!-- <CustomerSelect-->
<!-- v-model:value="where.equipmentId"-->
<!-- :placeholder="`按设备筛选`"-->
<!-- @select="onSelect"-->
<!-- @clear="onClear"-->
<!-- />-->
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { EquipmentParam } from '@/api/apps/equipment/model';
// import CustomerSelect from '@/components/CustomerSelect/index.vue';
import { ref, watch } from 'vue';
import { HualalaCardBenefitsParam } from '@/api/apps/hualala/card-benefits/model';
const emit = defineEmits<{
(e: 'search', where?: EquipmentParam): void;
(e: 'add'): void;
(e: 'remove'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where, resetFields } = useSearch<HualalaCardBenefitsParam>({
id: undefined,
cardLevelName: '',
name: ''
});
// 下来选项
const type = ref('cardLevelName');
// tabType
const listType = ref('all');
// 搜索内容
const searchText = ref('');
/* 搜索 */
const search = () => {
if (type.value == 'cardLevelName') {
where.cardLevelName = searchText.value;
where.name = undefined;
}
if (type.value == 'name') {
where.name = searchText.value;
where.cardLevelName = undefined;
}
emit('search', where);
};
// const handleTabs = (e) => {
// listType.value = e.target.value;
// if (listType.value == 'all') {
// resetFields();
// }
// if (listType.value == 'onSale') {
// where.status = 0;
// }
// if (listType.value == 'offSale') {
// where.status = 1;
// }
// if (listType.value == 'soldOut') {
// where.stockTotal = 0;
// }
// emit('search', where);
// };
// 新增
const add = () => {
emit('add');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
/* 重置 */
// const reset = () => {
// resetFields();
// search();
// };
// 监听字典id变化
watch(
() => props.selection,
() => {}
);
</script>

276
src/views/apps/hualala/card-benefits/index.vue Normal file
View File

@@ -0,0 +1,276 @@
<template>
<div class="page">
<a-page-header :ghost="false" title="会员权益">
<div class="ele-text-secondary"> 会员权益 </div>
</a-page-header>
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="hualalaCardBenefitsId"
:columns="columns"
:height="tableHeight"
:datasource="datasource"
v-model:selection="selection"
:scroll="{ x: 800 }"
>
<template #toolbar>
<search
:selection="selection"
@search="reload"
@add="openEdit"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="80" />
</template>
<template v-if="column.key === 'hualalaCardBenefitsCode'">
<a @click="openEdit(record)">{{
record.hualalaCardBenefitsCode
}}</a>
</template>
<template v-if="column.key === 'hualalaCardBenefitsName'">
{{ record.hualalaCardBenefitsName }}
</template>
<template v-if="column.key === 'isOnline'">
<a-tag v-if="record.status === 0" color="green">正常</a-tag>
<a-tag v-if="record.status === 1" color="orange">异常</a-tag>
</template>
<template v-if="column.key === 'comments'">
<a-tooltip :title="record.comments" placement="topLeft">
{{ record.comments }}
</a-tooltip>
</template>
<template v-if="column.key === 'createTime'">
<a-tooltip :title="`${toDateString(record.createTime)}`">
{{ timeAgo(record.createTime) }}
</a-tooltip>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<Edit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</div>
</template>
<!--suppress TypeScriptValidateTypes -->
<script lang="ts" setup>
import { timeAgo } from 'ele-admin-pro';
import { createVNode, computed, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import Edit from './components/edit.vue';
import {
pageHualalaCardBenefits,
removeHualalaCardBenefits,
removeBatchHualalaCardBenefits
} from '@/api/apps/hualala/card-benefits';
import type {
HualalaCardBenefits,
HualalaCardBenefitsParam
} from '@/api/apps/hualala/card-benefits/model';
import { Category } from '@/api/goods/category/model';
// import { getDictionaryOptions } from '@/utils/common';
// import { useUserStore } from '@/store/modules/user';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 当前用户信息
// const brand = getDictionaryOptions('serverBrand');
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '卡片背景',
dataIndex: 'image'
},
{
title: '等级名称',
dataIndex: 'cardLevelName',
sorter: true,
ellipsis: true
},
{
title: '会员权益',
dataIndex: 'name'
},
{
title: '详细内容',
dataIndex: 'content'
},
{
title: '排序',
dataIndex: 'sortNumber',
hideInTable: true,
sorter: true
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
ellipsis: true,
hideInTable: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center',
hideInSetting: true
}
]);
// 表格选中数据
const selection = ref<HualalaCardBenefits[]>([]);
// 当前编辑数据
const current = ref<HualalaCardBenefits | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 树形数据
// const data = ref<Category[]>([]);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.brand = filters.brand;
}
return pageHualalaCardBenefits({ ...where, ...orders, page, limit });
};
/* 搜索 */
const reload = (where?: HualalaCardBenefitsParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
// 搜索是否展开
const searchExpand = ref(false);
// 表格固定高度
const fixedHeight = ref(false);
// 表格高度
const tableHeight = computed(() => {
return fixedHeight.value
? searchExpand.value
? 'calc(100vh - 618px)'
: 'calc(100vh - 562px)'
: void 0;
});
/* 打开编辑弹窗 */
const openEdit = (row?: HualalaCardBenefits) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
// const openInfo = (row?: HualalaCardBenefits) => {
// current.value = row ?? null;
// showEdit.value = true;
// };
/* 删除单个 */
const remove = (row: HualalaCardBenefits) => {
const hide = message.loading('请求中..', 0);
removeHualalaCardBenefits(row.hualalaCardBenefitsId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchHualalaCardBenefits(
selection.value.map((d) => d.hualalaCardBenefitsId)
)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
</script>
<script lang="ts">
export default {
name: 'HualalaCardBenefitsIndex'
};
</script>
<style lang="less" scoped>
// 文字超出隐藏(两行)
// 需要设置文字容器的宽度
.twoline-hide {
width: 320px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
</style>

39
src/views/apps/hualala/card/components/category-select.vue Normal file
View File

@@ -0,0 +1,39 @@
<!-- 目录选择下拉框 -->
<template>
<a-tree-select
allow-clear
tree-default-expand-all
:placeholder="placeholder"
:value="value || undefined"
:tree-data="data"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
@update:value="updateValue"
/>
</template>
<script lang="ts" setup>
import type { Equipment } from '@/api/apps/equipment/model';
const emit = defineEmits<{
(e: 'update:value', value?: number): void;
}>();
withDefaults(
defineProps<{
// 选中的数据(v-modal)
value?: number;
// 提示信息
placeholder?: string;
// 文章分类
data: Equipment[];
}>(),
{
placeholder: '请选择上级分类'
}
);
/* 更新选中数据 */
const updateValue = (value?: number) => {
emit('update:value', value);
};
</script>

653
src/views/apps/hualala/card/components/edit.vue Normal file
View File

@@ -0,0 +1,653 @@
<!-- 用户编辑弹窗 -->
<template>
<a-drawer
:width="880"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑设备' : '添加设备'"
:body-style="{ paddingBottom: '8px' }"
:footer-style="{ textAlign: 'right' }"
@update:visible="updateVisible"
:maskClosable="isUpdate"
@ok="save"
>
<a-form
ref="formRef"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
:model="form"
:rules="rules"
>
<a-row :gutter="16">
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="所属商户" name="merchantCode">
<MerchantSelect
dict-code="equipmentModel"
placeholder="请选择所属商户"
v-model:value="form.merchantCode"
/>
</a-form-item>
<a-form-item label="设备名称" name="equipmentName">
<DictSelect
dict-code="equipmentName"
placeholder="请选择设备"
v-model:value="form.equipmentName"
/>
</a-form-item>
<a-form-item label="设备分类" name="equipmentCategory">
<DictSelect
dict-code="equipmentCategory"
placeholder="请选择电池型号"
v-model:value="form.equipmentCategory"
/>
</a-form-item>
<a-form-item label="电池型号" name="batteryModel">
<DictSelect
dict-code="equipmentModel"
placeholder="请选择电池型号"
v-model:value="form.batteryModel"
/>
</a-form-item>
<a-form-item label="工作状态" name="workingStatus">
<DictSelect
dict-code="workingStatus"
v-model:value="form.workingStatus"
placeholder="选择工作状态"
/>
</a-form-item>
<a-form-item label="电池状态" name="batteryStatus">
<DictSelect
dict-code="batteryStatus"
v-model:value="form.batteryStatus"
placeholder="选择电池状态"
/>
</a-form-item>
<a-form-item label="是否在线" name="isOnline">
<DictSelect
dict-code="isOnline"
v-model:value="form.isOnline"
placeholder="是否在线"
/>
</a-form-item>
<a-form-item label="BMS板供应商" name="bmsBrand">
<DictSelect
dict-code="bmsBrand"
v-model:value="form.bmsBrand"
placeholder="选择供应商"
/>
</a-form-item>
<a-form-item label="ICCID" name="iccid">
<a-input
allow-clear
placeholder="请输入剩余容量"
v-model:value="form.iccid"
/>
</a-form-item>
<a-form-item label="电池出厂时间" name="batteryDeliveryTime">
<a-date-picker
class="ele-fluid"
placeholder="请选择时间"
v-model:value="batteryDeliveryTime"
/>
</a-form-item>
</a-col>
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="设备编码" name="equipmentCode">
<a-input
allow-clear
placeholder="请输入设备编码"
:disabled="isUpdate"
v-model:value="form.equipmentCode"
/>
</a-form-item>
<a-form-item label="bms" name="bms">
<a-input
allow-clear
placeholder="请输入设备BMS"
v-model:value="form.bms"
/>
</a-form-item>
<a-form-item label="是否激活" name="isCtive">
<DictSelect
dict-code="ctiveStatus"
v-model:value="form.isCtive"
placeholder="是否激活"
/>
</a-form-item>
<a-form-item label="租赁状态" name="leaseStatus">
<DictSelect
dict-code="leaseStatus"
v-model:value="form.leaseStatus"
placeholder="是否激活"
/>
</a-form-item>
<a-form-item label="电池电量" name="batteryPower">
<a-input
allow-clear
placeholder="请输入电池电量"
v-model:value="form.batteryPower"
/>
</a-form-item>
<a-form-item label="总电压" name="totalVoltage">
<a-input
allow-clear
placeholder="请输入总电压"
v-model:value="form.totalVoltage"
/>
</a-form-item>
<a-form-item label="剩余容量" name="surplusCapacity">
<a-input
allow-clear
placeholder="请输入剩余容量"
v-model:value="form.surplusCapacity"
/>
</a-form-item>
<a-form-item label="设备激活时间" name="ctiveTime">
<a-date-picker
class="ele-fluid"
placeholder="请选择时间"
v-model:value="ctiveTime"
/>
</a-form-item>
<a-form-item label="设备开关" name="status">
<a-switch :checked="form.status === 0" @change="editStatus" />
</a-form-item>
</a-col>
</a-row>
<!-- <a-form-item label="设备图片" name="images">-->
<!-- <ele-image-upload-->
<!-- v-model:value="images"-->
<!-- :limit="14"-->
<!-- :drag="true"-->
<!-- :multiple="true"-->
<!-- :upload-handler="uploadHandler"-->
<!-- @upload="onUpload"-->
<!-- />-->
<!-- </a-form-item>-->
</a-form>
<template #footer>
<a-space>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" @click="save">保存</a-button>
</a-space>
</template>
<!-- <a-tabs v-model:activeKey="activeKey" type="card">-->
<!-- <a-tab-pane key="1" tab="基本信息" />-->
<!-- <a-tab-pane key="2" tab="设备详情">-->
<!-- <a-form-->
<!-- ref="formRef"-->
<!-- :label-col="{ md: { span: 8 }, sm: { span: 24 } }"-->
<!-- :wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"-->
<!-- layout="vertical"-->
<!-- :model="form"-->
<!-- :rules="rules"-->
<!-- >-->
<!-- <a-form-item label="" name="content">-->
<!-- &lt;!&ndash; 编辑器 &ndash;&gt;-->
<!-- <tinymce-editor-->
<!-- v-model:value="content"-->
<!-- :disabled="disabled"-->
<!-- :init="config"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-form>-->
<!-- </a-tab-pane>-->
<!-- </a-tabs>-->
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { Equipment } from '@/api/apps/equipment/model';
import { addEquipment, updateEquipment } from '@/api/apps/equipment';
import { FormInstance, Rule, RuleObject } from 'ant-design-vue/es/form';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { uploadFile } from '@/api/system/file';
import { FILE_SERVER, FILE_THUMBNAIL } from "@/config/setting";
import useFormData from '@/utils/use-form-data';
import TinymceEditor from '@/components/TinymceEditor/index.vue';
import { Category } from '@/api/goods/category/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import DictSelect from '@/components/DictSelect/index.vue';
import MerchantSelect from '@/components/MerchantSelect/index.vue';
import { createCode } from '@/utils/common';
import dayjs, { Dayjs } from 'dayjs';
// import MultiSpec from './MultiSpec.vue';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Equipment | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
const disabled = ref(false);
// 选择日期
const batteryDeliveryTime = ref<Dayjs>();
const ctiveTime = ref<Dayjs>();
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
// 提交状态
const loading = ref(false);
// 已上传数据
const images = ref<ItemType[]>([]);
const formRef = ref<FormInstance | null>(null);
// 选项卡位置
// const activeKey = ref('1');
// 编辑器内容，双向绑定
const content = ref<any>('');
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<Equipment>({
equipmentType: 1,
equipmentName: undefined,
equipmentCode: `E${createCode()}`,
batteryModel: undefined,
equipmentCategory: undefined,
bms: undefined,
isCtive: undefined,
workingStatus: undefined,
leaseStatus: undefined,
batteryStatus: undefined,
batteryPower: undefined,
isOnline: undefined,
totalVoltage: undefined,
bmsBrand: undefined,
surplusCapacity: undefined,
iccid: undefined,
ctiveTime: undefined,
batteryDeliveryTime: undefined,
image: '',
files: '',
createTime: '',
comments: '',
sortNumber: 100,
status: 0,
equipmentId: 0,
content: '',
merchantCode: undefined
});
/* 上传事件 */
const uploadHandler = (file: File) => {
const item: ItemType = {
file,
uid: (file as any).uid,
name: file.name
};
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return;
}
if (file.size / 1024 / 1024 > 2) {
message.error('大小不能超过 2MB');
return;
}
onUpload(item);
};
// 上传文件
const onUpload = (item) => {
const { file } = item;
uploadFile(file)
.then((data) => {
images.value.push({
uid: data.id,
url: FILE_THUMBNAIL + data.path,
status: 'done'
});
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
merchantCode: [
{
required: true,
message: '请选择商户',
type: 'string',
trigger: 'blur'
}
],
equipmentName: [
{
required: true,
message: '请输入设备名称',
type: 'string',
trigger: 'blur'
}
],
batteryModel: [
{
required: true,
type: 'string',
message: '请选择电池型号',
trigger: 'blur'
}
],
equipmentCategory: [
{
required: true,
type: 'string',
message: '请选择设备分类',
trigger: 'blur'
}
],
equipmentCode: [
{
required: true,
type: 'string',
message: '请填写设备编号',
trigger: 'blur'
}
],
isCtive: [
{
required: true,
type: 'string',
message: '请选择是否激活',
trigger: 'blur'
}
],
equipmentType: [
{
required: true,
type: 'number',
message: '请选择设备类型',
trigger: 'blur'
}
],
deliveryType: [
{
required: true,
type: 'number',
message: '请选择配送方式',
trigger: 'blur'
}
],
equipmentPriceMin: [
{
required: true,
type: 'number',
message: '请输入设备价格',
trigger: 'blur'
}
],
stockTotal: [
{
required: true,
type: 'number',
message: '请输入设备库存',
trigger: 'blur'
}
],
specType: [
{
required: true,
type: 'number',
message: '请选择规格类型',
trigger: 'blur'
}
],
deliveryId: [
{
required: true,
type: 'number',
message: '请选择运费模板',
trigger: 'blur'
}
],
status: [
{
required: true,
type: 'number',
message: '请选择设备状态',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
type: 'number',
message: '请输入排序号',
trigger: 'blur'
}
],
deductStockType: [
{
required: true,
type: 'number',
message: '请设置库存计算方式',
trigger: 'blur'
}
],
purchaseLimit: [
{
required: true,
type: 'number',
message: '请设置是否限购',
trigger: 'blur'
}
],
// images: [
// {
// required: true,
// type: 'string',
// message: '请选择设备图片',
// trigger: 'blur',
// validator: async (_rule: RuleObject, value: string) => {
// if (images.value.length == 0) {
// return Promise.reject('请上传设备图片');
// }
// return Promise.resolve();
// }
// }
// ],
customerId: [
{
required: true,
type: 'number',
message: '请选择客户'
}
],
linePriceMin: [
{
required: true,
type: 'number',
message: '请输入设备划线价',
trigger: 'blur'
}
],
content: [
{
required: true,
type: 'string',
message: '请输入文章内容',
trigger: 'blur',
validator: async (_rule: RuleObject, value: string) => {
if (content.value == '') {
return Promise.reject('请输入文字内容');
}
return Promise.resolve();
}
}
],
brand: [
{
required: true,
type: 'string',
message: '请选项设备厂商',
trigger: 'blur'
}
]
});
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
const config = ref({
height: 500,
// 自定义文件上传(这里使用把选择的文件转成 blob 演示)
file_picker_callback: (callback: any, _value: any, meta: any) => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
// 设定文件可选类型
if (meta.filetype === 'image') {
input.setAttribute('accept', 'image/*');
} else if (meta.filetype === 'media') {
input.setAttribute('accept', 'video/*');
}
input.onchange = () => {
const file = input.files?.[0];
if (!file) {
return;
}
if (meta.filetype === 'media') {
if (!file.type.startsWith('video/')) {
editorRef.value?.alert({ content: '只能选择视频文件' });
return;
}
}
if (file.size / 1024 / 1024 > 20) {
editorRef.value?.alert({ content: '大小不能超过 20MB' });
return;
}
const reader = new FileReader();
reader.onload = (e) => {
if (e.target?.result != null) {
const blob = new Blob([e.target.result], { type: file.type });
callback(URL.createObjectURL(blob));
}
};
reader.readAsArrayBuffer(file);
};
input.click();
}
});
/* 控制放店开关 */
const editStatus = () => {
if (form.status == 0) {
form.status = 1;
} else {
form.status = 0;
}
updateEquipment(form)
.then(() => {
message.success('操作成功');
})
.catch((e) => {
message.error(e.message);
});
};
const onClose = () => {
updateVisible(false);
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
// 获取第一张图片作为封面图
images.value.map((d, i) => {
if (i === 0) {
form.image = d.url;
}
});
const equipmentForm = {
...form,
files: JSON.stringify(images.value),
content: content.value,
batteryDeliveryTime: batteryDeliveryTime.value?.format(
'YYYY-MM-DD HH:mm:ss'
),
ctiveTime: ctiveTime.value?.format('YYYY-MM-DD HH:mm:ss')
};
const saveOrUpdate = isUpdate.value ? updateEquipment : addEquipment;
saveOrUpdate(equipmentForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data
});
if (props.data.batteryDeliveryTime) {
batteryDeliveryTime.value = dayjs(
props.data.batteryDeliveryTime,
'YYYY-MM-DD'
);
ctiveTime.value = dayjs(props.data.ctiveTime, 'YYYY-MM-DD');
} else {
batteryDeliveryTime.value = undefined;
ctiveTime.value = undefined;
}
// images.value = JSON.parse(String(props.data.files));
content.value = props.data.content;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

140
src/views/apps/hualala/card/components/search.vue Normal file
View File

@@ -0,0 +1,140 @@
<!-- 搜索表单 -->
<template>
<a-space>
<a-button
type="primary"
class="ele-btn-icon"
v-permission="'apps:equipment:save'"
@click="add"
>
<template #icon>
<PlusOutlined />
</template>
<span>新建</span>
</a-button>
<a-button
danger
type="primary"
class="ele-btn-icon"
:v-role="`dev`"
@click="removeBatch"
v-if="props.selection.length > 0"
>
<template #icon>
<DeleteOutlined />
</template>
<span>批量删除</span>
</a-button>
<!-- <a-radio-group v-model:value="listType" @change="handleTabs">-->
<!-- <a-radio-button value="all">全部</a-radio-button>-->
<!-- <a-radio-button value="onSale">出售中</a-radio-button>-->
<!-- <a-radio-button value="offSale">已下架</a-radio-button>-->
<!-- <a-radio-button value="soldOut">已售罄</a-radio-button>-->
<!-- </a-radio-group>-->
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入搜索关键词"
@search="search"
@pressEnter="search"
>
<template #addonBefore>
<a-select v-model:value="type" style="width: 120px; margin: -5px -12px">
<a-select-option value="equipmentCode">设备编号</a-select-option>
<a-select-option value="equipmentName">设备名称</a-select-option>
</a-select>
</template>
</a-input-search>
<!-- <CustomerSelect-->
<!-- v-model:value="where.equipmentId"-->
<!-- :placeholder="`按设备筛选`"-->
<!-- @select="onSelect"-->
<!-- @clear="onClear"-->
<!-- />-->
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { EquipmentParam } from '@/api/apps/equipment/model';
// import CustomerSelect from '@/components/CustomerSelect/index.vue';
import { ref, watch } from 'vue';
const emit = defineEmits<{
(e: 'search', where?: EquipmentParam): void;
(e: 'add'): void;
(e: 'remove'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where, resetFields } = useSearch<EquipmentParam>({
equipmentId: undefined,
equipmentName: '',
equipmentCode: ''
});
// 下来选项
const type = ref('equipmentCode');
// tabType
const listType = ref('all');
// 搜索内容
const searchText = ref('');
/* 搜索 */
const search = () => {
if (type.value == 'equipmentName') {
where.equipmentName = searchText.value;
where.equipmentCode = undefined;
}
if (type.value == 'equipmentCode') {
where.equipmentCode = searchText.value;
where.equipmentName = undefined;
}
emit('search', where);
};
// const handleTabs = (e) => {
// listType.value = e.target.value;
// if (listType.value == 'all') {
// resetFields();
// }
// if (listType.value == 'onSale') {
// where.status = 0;
// }
// if (listType.value == 'offSale') {
// where.status = 1;
// }
// if (listType.value == 'soldOut') {
// where.stockTotal = 0;
// }
// emit('search', where);
// };
// 新增
const add = () => {
emit('add');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
/* 重置 */
// const reset = () => {
// resetFields();
// search();
// };
// 监听字典id变化
watch(
() => props.selection,
() => {}
);
</script>

275
src/views/apps/hualala/card/index.vue Normal file
View File

@@ -0,0 +1,275 @@
<template>
<div class="page">
<a-page-header :ghost="false" title="会员卡管理">
<div class="ele-text-secondary"> 会员卡管理 </div>
</a-page-header>
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="hualalaCardId"
:columns="columns"
:height="tableHeight"
:datasource="datasource"
v-model:selection="selection"
:scroll="{ x: 800 }"
>
<template #toolbar>
<search
:selection="selection"
@search="reload"
@add="openEdit"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="80" />
</template>
<template v-if="column.key === 'hualalaCardCode'">
<a @click="openEdit(record)">{{ record.hualalaCardCode }}</a>
</template>
<template v-if="column.key === 'hualalaCardName'">
{{ record.hualalaCardName }}
</template>
<template v-if="column.key === 'isOnline'">
<a-tag v-if="record.status === 0" color="green">正常</a-tag>
<a-tag v-if="record.status === 1" color="orange">异常</a-tag>
</template>
<template v-if="column.key === 'comments'">
<a-tooltip :title="record.comments" placement="topLeft">
{{ record.comments }}
</a-tooltip>
</template>
<template v-if="column.key === 'createTime'">
<a-tooltip :title="`${toDateString(record.createTime)}`">
{{ timeAgo(record.createTime) }}
</a-tooltip>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<Edit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</div>
</template>
<!--suppress TypeScriptValidateTypes -->
<script lang="ts" setup>
import { timeAgo } from 'ele-admin-pro';
import { createVNode, computed, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import Edit from './components/edit.vue';
import {
pageHualalaCard,
removeHualalaCard,
removeBatchHualalaCard
} from '@/api/apps/hualala/card';
import type {
HualalaCard,
HualalaCardParam
} from '@/api/apps/hualala/card/model';
import { Category } from '@/api/goods/category/model';
// import { getDictionaryOptions } from '@/utils/common';
// import { useUserStore } from '@/store/modules/user';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 当前用户信息
// const brand = getDictionaryOptions('serverBrand');
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '会员卡名称',
dataIndex: 'cardLevelName'
},
{
title: '会员卡号',
dataIndex: 'cardNo',
sorter: true
},
{
title: '会员手机号',
dataIndex: 'customerMobile',
sorter: true
},
{
title: '会员卡状态',
dataIndex: 'cardStatus',
sorter: true,
key: 'batteryStatus',
showSorterTooltip: false,
customRender: ({ text }) => ['上架', '下架'][text]
},
{
title: '排序',
dataIndex: 'sortNumber',
sorter: true
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
ellipsis: true,
hideInTable: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center',
hideInSetting: true
}
]);
// 表格选中数据
const selection = ref<HualalaCard[]>([]);
// 当前编辑数据
const current = ref<HualalaCard | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 树形数据
const data = ref<Category[]>([]);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.brand = filters.brand;
}
return pageHualalaCard({ ...where, ...orders, page, limit });
};
/* 搜索 */
const reload = (where?: HualalaCardParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
// 搜索是否展开
const searchExpand = ref(false);
// 表格固定高度
const fixedHeight = ref(false);
// 表格高度
const tableHeight = computed(() => {
return fixedHeight.value
? searchExpand.value
? 'calc(100vh - 618px)'
: 'calc(100vh - 562px)'
: void 0;
});
/* 打开编辑弹窗 */
const openEdit = (row?: HualalaCard) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
const openInfo = (row?: HualalaCard) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 删除单个 */
const remove = (row: HualalaCard) => {
const hide = message.loading('请求中..', 0);
removeHualalaCard(row.hualalaCardId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchHualalaCard(selection.value.map((d) => d.hualalaCardId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
</script>
<script lang="ts">
export default {
name: 'HualalaCardIndex'
};
</script>
<style lang="less" scoped>
// 文字超出隐藏(两行)
// 需要设置文字容器的宽度
.twoline-hide {
width: 320px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
</style>

43
src/views/apps/link/components/dict-radio.vue Normal file
View File

@@ -0,0 +1,43 @@
<!-- 类型选择 -->
<template>
<a-radio-group
:value="value"
@blur="onBlur"
@update:value="updateValue"
:options="data"
/>
</template>
<script lang="ts" setup>
import { getDictionaryOptions } from '@/utils/common';
import { getLinkType } from '@/api/apps/link';
const emit = defineEmits<{
(e: 'update:value', value: string): void;
(e: 'blur'): void;
}>();
withDefaults(
defineProps<{
value?: string;
placeholder?: string;
dictCode?: string;
}>(),
{
placeholder: '请选择'
}
);
// 字典数据(如未定义字典数据取默认值)
const data = getDictionaryOptions('linkType') || getLinkType();
/* 更新选中数据 */
const updateValue = (value: string) => {
emit('update:value', value);
};
/* 失去焦点 */
const onBlur = () => {
emit('blur');
};
</script>

46
src/views/apps/link/components/dict-select.vue Normal file
View File

@@ -0,0 +1,46 @@
<!-- 角色选择下拉框 -->
<template>
<a-select
show-search
optionFilterProp="label"
:options="data"
allow-clear
:value="value"
:placeholder="placeholder"
@update:value="updateValue"
@blur="onBlur"
/>
</template>
<script lang="ts" setup>
import { getDictionaryOptions } from '@/utils/common';
const emit = defineEmits<{
(e: 'update:value', value: string): void;
(e: 'blur'): void;
}>();
const props = withDefaults(
defineProps<{
value?: string;
placeholder?: string;
dictCode?: string;
}>(),
{
placeholder: '请选择服务器厂商'
}
);
// 字典数据
const data = getDictionaryOptions(props.dictCode);
/* 更新选中数据 */
const updateValue = (value: string) => {
emit('update:value', value);
};
/* 失去焦点 */
const onBlur = () => {
emit('blur');
};
</script>

263
src/views/apps/link/components/link-edit.vue Normal file
View File

@@ -0,0 +1,263 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="680px"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '编辑链接' : '添加链接'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="{ md: { span: 4 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
layout="horizontal"
>
<a-form-item label="类型" name="type">
<dict-radio
v-model:value="form.type"
:placeholder="'请选择链接类型'"
@change="onChange"
/>
</a-form-item>
<a-form-item label="链接名称" name="linkName" v-if="form.type === '0'">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入链接名称"
v-model:value="form.linkName"
/>
</a-form-item>
<a-form-item label="描述" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入备注"
v-model:value="form.comments"
/>
</a-form-item>
<!-- <a-form-item-->
<!-- v-if="form.type === '0'"-->
<!-- label="组件路径"-->
<!-- v-bind="validateInfos.linkComponent"-->
<!-- >-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- placeholder="请输入组件路径"-->
<!-- v-model:value="form.linkComponent"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item-->
<!-- v-if="form.type === '1'"-->
<!-- label="链接地址"-->
<!-- v-bind="validateInfos.linkUrl"-->
<!-- >-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- placeholder="请输入官方网址"-->
<!-- v-model:value="form.linkUrl"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item label="图标路径" v-bind="validateInfos.linkIcon">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- placeholder="请填写图标路径"-->
<!-- v-model:value="form.linkIcon"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item-->
<!-- label="链接分类"-->
<!-- v-bind="validateInfos.category"-->
<!-- v-if="form.type === '1'"-->
<!-- >-->
<!-- <dict-select-->
<!-- v-model:value="form.category"-->
<!-- :dictCode="'linkCategory'"-->
<!-- :placeholder="'请选择链接类别'"-->
<!-- @blur="validate('category', { trigger: 'blur' }).catch(() => {})"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item-->
<!-- label="下载地址"-->
<!-- v-bind="validateInfos.linkDown"-->
<!-- v-if="form.type === '1'"-->
<!-- >-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- placeholder="请输入下载地址"-->
<!-- v-model:value="form.linkDown"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item-->
<!-- label="访问账号"-->
<!-- v-bind="validateInfos.linkAccount"-->
<!-- v-if="form.type === '1'"-->
<!-- >-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- placeholder="请填写访问账号"-->
<!-- v-model:value="form.linkAccount"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item-->
<!-- label="访问密码"-->
<!-- v-bind="validateInfos.linkPassword"-->
<!-- v-if="form.type === '1'"-->
<!-- >-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- placeholder="请填写访问密码"-->
<!-- v-model:value="form.linkPassword"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="排序" v-bind="validateInfos.sortNumber">
<a-input
allow-clear
:maxlength="20"
placeholder="排序"
v-model:value="form.sortNumber"
/>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import DictRadio from './dict-radio.vue';
import { addLink, updateLink } from '@/api/apps/link';
import type { Link } from '@/api/apps/link/model';
const useForm = Form.useForm;
// 是否是修改
const isUpdate = ref(false);
// 是否显示
const isShow = ref(false);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Link | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 用户信息
const form = reactive<Link>({
linkId: 0,
linkName: '',
linkUrl: '',
linkIcon: '',
type: '0',
clicks: undefined,
comments: '',
sortNumber: 100
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
type: [
{
required: true,
type: 'string',
message: '请选项链接类型',
trigger: 'blur'
}
],
linkName: [
{
required: true,
type: 'string',
message: '请输入链接名称',
trigger: 'blur'
}
],
comments: [
{
required: true,
type: 'string',
message: '请输入功能描述',
trigger: 'blur'
}
],
linkUrl: [
{
required: true,
type: 'string',
message: '请填写组件路径或链接地址',
trigger: 'blur'
}
]
});
/* openType选择改变 */
const onChange = () => {
isShow.value = !isShow.value;
};
const { resetFields, validate, validateInfos } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
const data = {
...form
};
const saveOrUpdate = isUpdate.value ? updateLink : addLink;
saveOrUpdate(data)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignObject(form, props.data);
isUpdate.value = true;
isShow.value = props.data.type === '0';
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
</style>

207
src/views/apps/link/index.vue Normal file
View File

@@ -0,0 +1,207 @@
<template>
<div class="ele-body">
<a-card :bordered="false" :body-style="{ padding: '44px 16px' }">
<div
style="
max-width: 500px;
margin: 0 auto;
display: flex;
justify-content: space-between;
"
>
<div style="width: 100%">
<a-input-search
size="large"
placeholder="请输入搜索关键词"
@search="onSearch"
/>
<!-- <div style="padding-top: 10px">-->
<!-- <a type="link" class="a-link">应用组件</a>-->
<!-- <a type="link" class="a-link">外部链接</a>-->
<!-- <a type="link" class="a-link">前端框架</a>-->
<!-- </div>-->
</div>
<a-button class="ele-btn-icon app-btn-search" @click="openEdit()">
<template #icon>
<plus-outlined />
</template>
<span>添加链接</span>
</a-button>
</div>
</a-card>
<a-row :gutter="16">
<a-col
v-for="(item, index) in list"
:key="index"
:lg="6"
:md="8"
:sm="12"
:xs="24"
>
<a-badge-ribbon :text="item.category">
<a-card :bordered="false" hoverable style="margin-top: 16px">
<div class="ele-cell" style="margin-bottom: 16px">
<a-avatar :src="item.linkIcon" :size="50" />
<div class="ele-cell-content">
<h4 class="link-name">{{ item.linkName }}</h4>
<small class="ele-text-placeholder" v-if="item.type === '1'">
{{ item.linkUrl }}
</small>
</div>
</div>
<div class="ele-elip" style="margin-bottom: 6px">
{{ item.comments }}
</div>
<div class="ele-elip ele-text-placeholder">{{
item.createTime
}}</div>
<template #actions>
<a-tooltip title="访问链接">
<chrome-outlined @click="openUrl(item)" />
</a-tooltip>
<a-tooltip title="复制链接">
<share-alt-outlined @click="copyUrl(item)" />
</a-tooltip>
<a-tooltip :title="item.linkDown">
<download-outlined @click="downUrl(item)" />
</a-tooltip>
<a-tooltip title="编辑">
<edit-outlined @click="openEdit(item)" />
</a-tooltip>
</template>
</a-card>
</a-badge-ribbon>
</a-col>
</a-row>
<div class="ele-text-center" style="margin-top: 18px">
<a-pagination
:total="where.count"
v-model:current="where.page"
v-model:page-size="where.limit"
@change="onChange"
/>
</div>
<div v-if="!list.length" style="margin-top: 46px">
<a-empty />
</div>
<!-- 编辑弹窗 -->
<link-edit v-model:visible="showEdit" :data="current" @done="onSearch" />
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { pageLink } from '@/api/apps/link';
import type { Link, LinkParam } from '@/api/apps/link/model';
import LinkEdit from './components/link-edit.vue';
import { message } from 'ant-design-vue';
import {
ChromeOutlined,
EyeOutlined,
DownloadOutlined,
EditOutlined,
ShareAltOutlined,
EllipsisOutlined
} from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import router from '@/router';
import { getDictionaryOptions } from '@/utils/common';
// 当前编辑数据
const current = ref<Link | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
const linkType = getDictionaryOptions('linkType');
// 打开链接
const openUrl = (item) => {
if (item.type == '0') {
return router.push(item.linkComponent);
}
return window.open(item.linkUrl);
};
// 下载文件
const downUrl = (url) => {
if (url.linkDown) {
return window.open(url.linkDown);
}
};
// 复制文本
const copyUrl = (item) => {
// 模拟 输入框
const cInput = document.createElement('input');
cInput.value = item.linkDown ? item.linkDown : item.linkUrl;
document.body.appendChild(cInput);
cInput.select(); // 选取文本框内容
// 执行浏览器复制命令
// 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
// Input要在正常的编辑状态下原生复制方法才会生效
message.success('复制成功');
document.execCommand('copy');
// 复制成功后再将构造的标签 移除
document.body.removeChild(cInput);
};
const list = ref<Link[]>([]);
/* 打开编辑弹窗 */
const openEdit = (row?: Link) => {
current.value = row ?? null;
showEdit.value = true;
};
// 表单数据
const { where } = useSearch<LinkParam>({
page: 1,
limit: 36,
count: 0,
linkName: '',
list: []
});
/* 搜索 */
const onSearch = (linkName: string) => {
// 重置当前页面
if (linkName) {
where.page = 1;
}
pageLink({ ...where, linkName }).then((data) => {
where.count = data?.count;
list.value = data.list;
});
};
// 翻页
const onChange = (e) => {
where.page = e;
onSearch();
};
onSearch();
</script>
<script lang="ts">
export default {
name: 'Links'
};
</script>
<style lang="less">
.app-btn-search {
margin-left: 12px;
height: 40px;
}
.link-name {
line-height: 1;
}
.a-link {
margin-right: 10px;
}
</style>

114
src/views/apps/upload/components/demo-advanced.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<a-card title="手动上传" :bordered="false">
<ele-image-upload
v-model:value="images"
:auto-upload="false"
:before-remove="onBeforeRemove"
/>
<div class="ele-cell">
<a-button type="primary" :loading="loading" @click="onSubmit">
提交
</a-button>
</div>
</a-card>
</template>
<script lang="ts" setup>
import { ref, createVNode } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type {
ItemType,
BeforeRemoveType
} from 'ele-admin-pro/es/ele-image-upload/types';
const images = ref<ItemType[]>([
{
uid: 1,
url: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
status: 'done'
},
{
uid: 2,
url: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
status: 'done'
},
{
uid: 3,
url: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
status: 'done'
}
]);
const loading = ref(false);
/* 手动上传 */
const onSubmit = () => {
if (checkDone()) {
submitForm();
return;
}
loading.value = true;
images.value.forEach((item) => {
if (!item.status) {
uploadItem(item);
}
});
};
/* 上传图片 */
const uploadItem = (item: ItemType) => {
// 模拟上传
if (item.progress == null) {
item.progress = 20;
} else {
item.progress += 20;
}
item.status = 'uploading';
const timer = setInterval(() => {
if (item.progress == null) {
item.progress = 20;
} else {
item.progress += 20;
}
if (item.progress === 100) {
item.status = 'done';
clearInterval(timer);
// 每个图片上传完成后都检查是否全部上传完成
if (checkDone()) {
submitForm();
}
}
}, Math.round(Math.random() * 2500) + 500);
};
/* 检查是否全部上传完毕 */
const checkDone = () => {
return !images.value.some((d) => d.status !== 'done');
};
/* 全部上传完毕后与其它表单数据一起提交 */
const submitForm = () => {
message.success('已全部上传完毕');
console.log('data:', images.value);
loading.value = false;
};
/* 删除增加确认弹窗 */
const onBeforeRemove: BeforeRemoveType = () => {
return new Promise<void>((resolve, reject) => {
Modal.confirm({
title: '提示',
content: '确定要删除吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
resolve();
},
onCancel: () => {
reject();
}
});
});
};
</script>

110
src/views/apps/upload/components/demo-basic.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<a-card title="基础示例" :bordered="false">
<ele-image-upload
v-model:value="images"
:limit="8"
:disabled="disabled"
:before-upload="onBeforeUpload"
:drag="true"
@upload="onUpload"
@item-click="onItemClick"
/>
<div class="ele-cell">
<a-button type="primary" @click="getData">获取数据</a-button>
<div style="line-height: 22px"><em></em>禁用:</div>
<div class="ele-cell-content">
<a-radio-group v-model:value="disabled">
<a-radio :value="false">否</a-radio>
<a-radio :value="true">是</a-radio>
</a-radio-group>
</div>
</div>
</a-card>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import type {
ItemType,
BeforeUploadType
} from 'ele-admin-pro/es/ele-image-upload/types';
// 已上传数据
const images = ref<ItemType[]>([
{
uid: 1,
url: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
status: 'done'
},
{
uid: 2,
url: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
status: 'done'
},
{
uid: 3,
url: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
status: 'done'
}
]);
// 禁用
const disabled = ref(false);
/* 获取当前数据 */
const getData = () => {
console.log('data:', images.value);
message.success('数据已打印在控制台');
};
/* 上传事件 */
const onUpload = (d: ItemType) => {
const item = images.value.find((t) => t.uid === d.uid) ?? d;
console.log('item:', item);
// 模拟上传
if (images.value.length !== 5) {
item.status = 'uploading';
item.progress = 20;
const timer = setInterval(() => {
if (item.progress == null) {
item.progress = 20;
} else {
item.progress += 20;
}
if (item.progress === 100) {
item.status = 'done';
clearInterval(timer);
}
}, 1000);
} else {
item.status = 'uploading';
if (item.progress == null) {
item.progress = 20;
} else if (item.progress < 80) {
item.progress += 20;
}
setTimeout(() => {
item.status = 'exception';
message.error('上传失败, 服务器繁忙');
}, 2000);
}
};
/* 上传前钩子 */
const onBeforeUpload: BeforeUploadType = (file: File) => {
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return false;
}
if (file.size / 1024 / 1024 > 2) {
message.error('大小不能超过 2MB');
return false;
}
};
/* item 点击事件 */
const onItemClick = (item: ItemType) => {
console.log('item-click:', item);
};
</script>

86
src/views/apps/upload/components/demo-multiple.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<a-card title="支持多选" :bordered="false">
<ele-image-upload
v-model:value="images"
:limit="8"
:drag="true"
:multiple="true"
:upload-handler="uploadHandler"
@upload="onUpload"
/>
<a-button type="primary" @click="getData">获取数据</a-button>
</a-card>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import type { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
// 已上传数据
const images = ref<ItemType[]>([
{
uid: 1,
url: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
status: 'done'
},
{
uid: 2,
url: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
status: 'done'
},
{
uid: 3,
url: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
status: 'done'
}
]);
/* 获取当前数据 */
const getData = () => {
console.log('data:', images.value);
message.success('数据已打印在控制台');
};
/* 上传事件 */
const uploadHandler = (file: File) => {
const item: ItemType = {
file,
uid: (file as any).uid,
name: file.name,
progress: 0,
status: undefined
};
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return;
}
if (file.size / 1024 / 1024 > 2) {
message.error('大小不能超过 2MB');
return;
}
item.url = window.URL.createObjectURL(file);
images.value.push(item);
onUpload(item);
};
/* 上传 item */
const onUpload = (d: ItemType) => {
const item = images.value.find((t) => t.uid === d.uid) ?? d;
console.log('item:', item);
// 模拟上传
item.status = 'uploading';
item.progress = 20;
const timer = setInterval(() => {
if (item.progress == null) {
item.progress = 20;
} else {
item.progress += 20;
}
if (item.progress === 100) {
item.status = 'done';
clearInterval(timer);
}
}, 1000);
};
</script>

19
src/views/apps/upload/index.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div class="ele-body ele-body-card">
<demo-basic />
<demo-advanced />
<demo-multiple />
</div>
</template>
<script lang="ts" setup>
import DemoBasic from './components/demo-basic.vue';
import DemoAdvanced from './components/demo-advanced.vue';
import DemoMultiple from './components/demo-multiple.vue';
</script>
<script lang="ts">
export default {
name: 'ExtensionUpload'
};
</script>

314
src/views/apps/video/index.vue Normal file
View File

@@ -0,0 +1,314 @@
<template>
<div class="ele-body">
<a-card :bordered="false" :body-style="{ padding: '44px 16px' }">
<div style="max-width: 500px; margin: 0 auto">
<a-input-search
size="large"
enter-button="搜索"
placeholder="请输入内容"
v-model:value="keyword"
/>
</div>
</a-card>
<a-row :gutter="16">
<a-col
v-for="(item, index) in data"
:key="index"
v-bind="
styleResponsive
? { xl: 6, lg: 8, md: 12, sm: 12, xs: 24 }
: { span: 6 }
"
>
<a-card :bordered="false" hoverable style="margin-top: 16px">
<template #cover>
<img :src="item.cover" alt="" />
</template>
<a-card-meta :title="item.title">
<template #description>
<div class="project-list-desc" :title="item.content">
{{ item.content }}
</div>
</template>
</a-card-meta>
<div class="ele-cell">
<div class="ele-cell-content ele-text-secondary">
{{ item.time }}
</div>
<ele-avatar-list :data="item.users" size="small" />
</div>
</a-card>
</a-col>
</a-row>
<div class="ele-text-center" style="margin-top: 18px">
<a-pagination
:total="count"
v-model:current="page"
v-model:page-size="limit"
@change="query"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
interface UserType {
name: string;
avatar: string;
}
interface DataType {
title: string;
content: string;
time: string;
cover: string;
users: UserType[];
}
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const data = ref<DataType[]>([]);
const keyword = ref('');
// 第几页
const page = ref(1);
// 每页多少条
const limit = ref(8);
// 总数量
const count = ref(0);
/* 查询数据 */
const query = () => {
count.value = 40;
data.value = [
{
title: 'ElementUI',
content:
'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
time: '2 小时前',
cover:
'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
users: [
{
name: 'SunSmile',
avatar:
'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
},
{
name: '酷酷的大叔',
avatar:
'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
},
{
name: 'Jasmine',
avatar:
'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
}
]
},
{
title: 'Vue.js',
content:
'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
time: '4 小时前',
cover:
'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
users: [
{
name: 'SunSmile',
avatar:
'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
},
{
name: '酷酷的大叔',
avatar:
'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
},
{
name: 'Jasmine',
avatar:
'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
}
]
},
{
title: 'Vuex',
content:
'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。',
time: '12 小时前',
cover:
'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
users: [
{
name: 'SunSmile',
avatar:
'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
},
{
name: '酷酷的大叔',
avatar:
'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
},
{
name: 'Jasmine',
avatar:
'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
}
]
},
{
title: 'Vue Router',
content:
'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。',
time: '14 小时前',
cover:
'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg',
users: [
{
name: 'SunSmile',
avatar:
'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
},
{
name: '酷酷的大叔',
avatar:
'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
},
{
name: 'Jasmine',
avatar:
'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
}
]
},
{
title: 'Sass',
content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
time: '10 小时前',
cover:
'https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg',
users: [
{
name: 'SunSmile',
avatar:
'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
},
{
name: '酷酷的大叔',
avatar:
'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
},
{
name: 'Jasmine',
avatar:
'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
}
]
},
{
title: 'Axios',
content:
'Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。',
time: '16 小时前',
cover:
'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
users: [
{
name: 'SunSmile',
avatar:
'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
},
{
name: '酷酷的大叔',
avatar:
'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
},
{
name: 'Jasmine',
avatar:
'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
}
]
},
{
title: 'Webpack',
content:
'webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。',
time: '6 小时前',
cover:
'https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg',
users: [
{
name: 'SunSmile',
avatar:
'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
},
{
name: '酷酷的大叔',
avatar:
'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
},
{
name: 'Jasmine',
avatar:
'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
}
]
},
{
title: 'Node.js',
content:
'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。',
time: '8 小时前',
cover:
'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg',
users: [
{
name: 'SunSmile',
avatar:
'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
},
{
name: '酷酷的大叔',
avatar:
'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
},
{
name: 'Jasmine',
avatar:
'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
}
]
}
];
};
query();
</script>
<script lang="ts">
export default {
name: 'ListCardProject'
};
</script>
<style lang="less" scoped>
.project-list-desc {
height: 44px;
line-height: 22px;
margin-bottom: 20px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>

0
src/views/apps/video/player/components/demo-basic.vue Normal file
View File

0
src/views/apps/video/player/components/demo-danmu.vue Normal file
View File

405
src/views/apps/video/player/index.vue Normal file
View File

@@ -0,0 +1,405 @@
<template>
<div class="ele-body ele-body-card">
<a-row :gutter="16">
<a-col
v-bind="
styleResponsive ? { lg: 12, md: 24, sm: 24, xs: 24 } : { span: 12 }
"
>
<a-card title="基础演示" :bordered="false">
<!-- 操作按钮 -->
<a-space style="margin-bottom: 16px">
<a-button
type="primary"
:disabled="!ready1"
class="ele-btn-icon"
@click="play"
>
播放
</a-button>
<a-button
type="primary"
:disabled="!ready1"
class="ele-btn-icon"
@click="pause"
>
暂停
</a-button>
<a-button
type="primary"
:disabled="!ready1"
class="ele-btn-icon"
@click="replay"
>
重新播放
</a-button>
<a-button
type="primary"
:disabled="!ready1"
class="ele-btn-icon"
@click="changeSrc"
>
切换视频源
</a-button>
</a-space>
<!-- 播放器 -->
<ele-xg-player :config="config1" @player="onPlayer1" />
</a-card>
</a-col>
<a-col
v-bind="
styleResponsive ? { lg: 12, md: 24, sm: 24, xs: 24 } : { span: 12 }
"
>
<a-card title="显示弹幕" :bordered="false">
<!-- 操作按钮 -->
<a-space style="margin-bottom: 16px">
<a-input
style="width: 160px"
v-model:value="text"
placeholder="请输入弹幕内容"
:disabled="!ready2"
/>
<a-button
type="primary"
:disabled="!ready2"
class="ele-btn-icon"
@click="shoot"
>
发射
</a-button>
</a-space>
<!-- 播放器 -->
<ele-xg-player :config="config2" @player="onPlayer2" />
</a-card>
</a-col>
<a-col
v-bind="
styleResponsive ? { lg: 12, md: 24, sm: 24, xs: 24 } : { span: 12 }
"
>
<a-card title="显示弹幕" :bordered="false">
<!-- 操作按钮 -->
<a-space style="margin-bottom: 16px">
<a-input
style="width: 160px"
v-model:value="text"
placeholder="请输入弹幕内容"
:disabled="!ready2"
/>
<a-button
type="primary"
:disabled="!ready2"
class="ele-btn-icon"
@click="shoot"
>
发射
</a-button>
</a-space>
<!-- 播放器 -->
<ele-xg-player :config="config2" @player="onPlayer2" />
</a-card>
</a-col>
</a-row>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue/es';
import type Player from 'xgplayer';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
// 视频播放器一配置
const config1 = reactive({
id: 'demoPlayer1',
lang: 'zh-cn',
fluid: true,
// 视频地址
url: 'https://s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
// 封面
poster:
'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png',
// 开启倍速播放
playbackRate: [0.5, 1, 1.5, 2],
// 开启画中画
pip: true
});
// 视频播放器一是否实例化完成
const ready1 = ref(false);
// 视频播放器二配置
const config2 = reactive({
id: 'demoPlayer2',
lang: 'zh-cn',
fluid: true,
url: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4',
poster:
'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png',
danmu: {
comments: [
{
id: '1',
start: 0,
txt: '空降',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '2',
start: 1500,
txt: '前方高能',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '3',
start: 3500,
txt: '弹幕护体',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '4',
start: 4500,
txt: '弹幕护体',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '5',
start: 6000,
txt: '前方高能',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '6',
start: 8500,
txt: '弹幕护体',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '7',
start: 10000,
txt: '666666666',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '8',
start: 12500,
txt: '前方高能',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '9',
start: 15500,
txt: '666666666',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '10',
start: 16500,
txt: '666666666',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '11',
start: 18000,
txt: '关弹幕，保智商',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '12',
start: 20500,
txt: '关弹幕，保智商',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '13',
start: 22000,
txt: '666666666',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '14',
start: 25500,
txt: '666666666',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
},
{
id: '15',
start: 26000,
txt: '前方高能',
duration: 15000,
color: true,
style: {
color: '#ffcd08',
fontSize: '20px'
}
}
]
}
});
// 视频播放器二是否实例化完成
const ready2 = ref(false);
// 弹幕输入内容
const text = ref('');
// 视频播放器一实例
let player1: Player;
// 视频播放器二实例
let player2: Player;
/* 播放器一渲染完成 */
const onPlayer1 = (player: Player) => {
player1 = player;
player1.on('play', () => {
ready1.value = true;
});
};
/* 播放 */
const play = () => {
if (player1 && player1.paused) {
player1.play();
}
};
/* 暂停 */
const pause = () => {
if (player1) {
player1.pause();
}
};
/* 重新播放 */
const replay = () => {
if (player1) {
player1.replay();
}
};
/* 切换视频源 */
const changeSrc = () => {
if (player1) {
player1.src =
'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4';
if (player1.paused) {
player1.play();
}
}
};
/* 播放器二渲染完成 */
const onPlayer2 = (player: Player) => {
player2 = player;
player2.on('play', () => {
ready2.value = true;
});
};
/* 发射弹幕 */
const shoot = () => {
if (!player2) {
return;
}
if (!text.value) {
message.error('请输入弹幕内容');
return;
}
player2.danmu.sendComment({
id: new Date().getTime(),
duration: 15000,
color: true,
start: player2.currentTime * 1000,
txt: text.value,
style: {
color: '#fa1f41',
fontSize: '20px',
border: 'solid 1px #fa1f41'
}
});
text.value = '';
};
</script>
<script lang="ts">
export default {
name: 'ExtensionPlayer'
};
</script>

170
src/views/baocan/agent/components/edit.vue Normal file
View File

@@ -0,0 +1,170 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="500"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '编辑代报餐人员' : '添加代报餐人员'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
:maskClosable="false"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
>
<a-form-item label="代报餐人员" name="parentId">
<SelectUser
:placeholder="`请选择帮代报餐的人员`"
v-model:value="parentName"
@done="chooseParentId"
/>
</a-form-item>
<a-form-item label="报餐人姓名" name="userId">
<SelectUser
:placeholder="`请选择需要代报的人员`"
v-model:value="nickName"
@done="chooseUserId"
/>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { BCAgent } from '@/api/apps/bc/agent/model';
import { addBCAgent, updateBCAgent } from '@/api/apps/bc/agent';
import { FormInstance, Rule } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { User } from '@/api/user/model';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: BCAgent | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
const formRef = ref<FormInstance | null>(null);
// 是否是修改
const isUpdate = ref(false);
const parentName = ref();
const nickName = ref();
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<BCAgent>({
userId: undefined,
parentId: undefined,
sortNumber: 100
});
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
parentId: [
{
required: true,
message: '请选择代报餐的人员',
type: 'number',
trigger: 'blur'
}
],
userId: [
{
required: true,
type: 'number',
message: '请选择报餐的人员姓名',
trigger: 'blur'
}
]
});
const chooseUserId = (data: User) => {
form.userId = data.userId;
nickName.value = data.nickname;
};
const chooseParentId = (data: User) => {
form.parentId = data.userId;
parentName.value = data.nickname;
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const merchantForm = {
...form
};
const saveOrUpdate = isUpdate.value ? updateBCAgent : addBCAgent;
saveOrUpdate(merchantForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
resetFields();
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data
});
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
.flex-sb {
display: flex;
justify-content: space-between;
}
</style>

123
src/views/baocan/agent/components/search.vue Normal file
View File

@@ -0,0 +1,123 @@
<!-- 搜索表单 -->
<template>
<a-space>
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<PlusOutlined />
</template>
<span>添加</span>
</a-button>
<!-- <a-button-->
<!-- danger-->
<!-- type="primary"-->
<!-- class="ele-btn-icon"-->
<!-- :v-role="`dev`"-->
<!-- @click="removeBatch"-->
<!-- v-if="props.selection.length > 0"-->
<!-- >-->
<!-- <template #icon>-->
<!-- <DeleteOutlined />-->
<!-- </template>-->
<!-- <span>批量删除</span>-->
<!-- </a-button>-->
<!-- <a-input-search-->
<!-- allow-clear-->
<!-- v-model:value="searchText"-->
<!-- placeholder="请输入搜索关键词"-->
<!-- @search="search"-->
<!-- @pressEnter="search"-->
<!-- >-->
<!-- <template #addonBefore>-->
<!-- <a-select v-model:value="type" style="width: 120px; margin: -5px -12px">-->
<!-- <a-select-option value="merchantName">商户名称</a-select-option>-->
<!-- <a-select-option value="merchantCode">商户编号</a-select-option>-->
<!-- </a-select>-->
<!-- </template>-->
<!-- </a-input-search>-->
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { MerchantParam } from '@/api/merchant/model';
// import CustomerSelect from '@/components/CustomerSelect/index.vue';
import { ref, watch } from 'vue';
const emit = defineEmits<{
(e: 'search', where?: MerchantParam): void;
(e: 'add'): void;
(e: 'remove'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where, resetFields } = useSearch<MerchantParam>({
merchantId: undefined,
merchantName: '',
merchantCode: ''
});
// 下来选项
const type = ref('merchantName');
// tabType
const listType = ref('all');
// 搜索内容
const searchText = ref('');
/* 搜索 */
const search = () => {
if (type.value == 'merchantName') {
where.merchantName = searchText.value;
where.merchantCode = undefined;
}
if (type.value == 'merchantCode') {
where.merchantCode = searchText.value;
where.merchantName = undefined;
}
emit('search', where);
};
// const handleTabs = (e) => {
// listType.value = e.target.value;
// if (listType.value == 'all') {
// resetFields();
// }
// if (listType.value == 'onSale') {
// where.status = 0;
// }
// if (listType.value == 'offSale') {
// where.status = 1;
// }
// if (listType.value == 'soldOut') {
// where.stockTotal = 0;
// }
// emit('search', where);
// };
// 新增
const add = () => {
emit('add');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
/* 重置 */
// const reset = () => {
// resetFields();
// search();
// };
// 监听字典id变化
watch(
() => props.selection,
() => {}
);
</script>

244
src/views/baocan/agent/index.vue Normal file
View File

@@ -0,0 +1,244 @@
<template>
<div class="page">
<a-page-header :ghost="false" title="代报餐管理">
<div class="ele-text-secondary">
代报餐管理，给特定账号添加代报餐权限。
</div>
</a-page-header>
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="userId"
:columns="columns"
:height="tableHeight"
:datasource="datasource"
:parse-data="parseData"
v-model:selection="selection"
:scroll="{ x: 800 }"
>
<template #toolbar>
<search
:selection="selection"
@search="reload"
@add="openEdit"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'user'">
<User v-if="record.user" :record="record.user" />
</template>
<template v-if="column.key === 'nickname'">
<span>{{ record.nickname }}</span>
</template>
<template v-if="column.key === 'parentUser'">
<User v-if="record.parentUser" :record="record.parentUser" />
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">营业中</a-tag>
<a-tag v-if="record.status === 1" color="orange">停业中</a-tag>
</template>
<template v-if="column.key === 'comments'">
<a-tooltip :title="record.comments" placement="topLeft">
{{ record.comments }}
</a-tooltip>
</template>
<template v-if="column.key === 'createTime'">
<a-tooltip :title="`${toDateString(record.createTime)}`">
{{ timeAgo(record.createTime) }}
</a-tooltip>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a class="ele-text-danger" @click="remove(record)">移除</a>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<edit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</div>
</template>
<script lang="ts" setup>
import { timeAgo, toTreeData } from 'ele-admin-pro';
import { createVNode, computed, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import Edit from './components/edit.vue';
import {
listBCAgent,
removeBCAgent,
removeBatchBCAgent
} from '@/api/apps/bc/agent';
import type { BCAgent, BCAgentParam } from '@/api/apps/bc/agent/model';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: '代报餐人/报餐人',
dataIndex: 'nickname',
key: 'nickname',
ellipsis: true
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
ellipsis: true,
hideInTable: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center',
hideInSetting: true
}
]);
// 表格选中数据
const selection = ref<BCAgent[]>([]);
// 当前编辑数据
const current = ref<BCAgent | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.brand = filters.brand;
}
return listBCAgent({ ...where, ...orders, page, limit });
};
/* 搜索 */
const reload = (where?: BCAgentParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
// 搜索是否展开
const searchExpand = ref(false);
// 表格固定高度
const fixedHeight = ref(false);
// 表格高度
const tableHeight = computed(() => {
return fixedHeight.value
? searchExpand.value
? 'calc(100vh - 618px)'
: 'calc(100vh - 562px)'
: void 0;
});
/* 打开编辑弹窗 */
const openEdit = (row?: BCAgent) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 数据转为树形结构 */
const parseData = (data) => {
const result: any[] = [];
data.forEach((item) => {
let index = result.findIndex((citem) => item.parentId == citem.userId);
if (index < 0) {
result.push({
userId: item.parentId,
nickname: item.parentName,
children: []
});
index = result.length - 1;
}
result[index].children.push({
userId: item.userId,
nickname: item.nickname,
agentId: item.agentId
});
});
return result;
};
/* 删除单个 */
const remove = (row: BCAgent) => {
console.log(row);
removeBCAgent(row.agentId)
.then((msg) => {
message.success(msg);
reload();
})
.catch((e) => {
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchBCAgent(selection.value.map((d) => d.agentId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
</script>
<script lang="ts">
export default {
name: 'BCAgentIndex'
};
</script>
<style lang="less" scoped>
// 文字超出隐藏(两行)
// 需要设置文字容器的宽度
.twoline-hide {
width: 320px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
</style>

256
src/views/baocan/cookbook/components/photo-edit.vue Normal file
View File

@@ -0,0 +1,256 @@
<!-- 角色编辑弹窗 -->
<template>
<ele-modal
:width="600"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '编辑' : '上传文件'"
:body-style="{ paddingBottom: '8px' }"
okText="保存"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="上传文件" name="fileName" v-if="!isUpdate">
<span
class="ele-text-success"
v-if="fileName"
style="margin-right: 10px"
>
{{ fileName }}
</span>
<a-upload
:show-upload-list="false"
:accept="'video/*'"
v-if="!fileName"
:customRequest="onUpload"
>
<a-button type="primary" class="ele-btn-icon">
<template #icon>
<UploadOutlined />
</template>
<span>上传文件</span>
</a-button>
</a-upload>
</a-form-item>
<a-form-item label="文件名称" name="name">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入文件名称"
v-model:value="form.name"
/>
</a-form-item>
<a-form-item label="描述" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="图片描述"
v-model:value="form.comments"
/>
</a-form-item>
<div style="margin-bottom: 22px">
<a-divider orientation="left">图片分享</a-divider>
</div>
<a-form-item label="图片URL链接">
<a-input v-model:value="share.url" @click="copyText(share.url)" />
</a-form-item>
<a-form-item label="网页代码(HTML)">
<a-input v-model:value="share.html" @click="copyText(share.html)" />
</a-form-item>
<a-form-item label="Markdown">
<a-input
v-model:value="share.Markdown"
@click="copyText(share.Markdown)"
/>
</a-form-item>
<a-form-item label="论坛BBCode">
<a-input v-model:value="share.bbCode" @click="copyText(share.bbCode)" />
</a-form-item>
<!-- <a-form-item label="封面图" name="images">-->
<!-- <ele-image-upload-->
<!-- v-model:value="images"-->
<!-- :limit="1"-->
<!-- :drag="true"-->
<!-- :item-style="{ width: '60px', height: '60px' }"-->
<!-- :accept="'image/*'"-->
<!-- :upload-handler="uploadHandler"-->
<!-- @upload="onUpload"-->
<!-- />-->
<!-- </a-form-item>-->
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue/es';
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import type { FileRecord } from '@/api/system/file/model';
import { messageLoading } from 'ele-admin-pro';
import { addFiles, updateFiles, uploadFile } from '@/api/system/file';
import { UploadOutlined } from '@ant-design/icons-vue';
import { RuleObject } from 'ant-design-vue/es/form';
import { copyText } from '@/utils/common';
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: FileRecord | null;
}>();
//
const formRef = ref<FormInstance | null>(null);
const fileName = ref('');
// 是否是修改
const isUpdate = ref(false);
// 提交状态
const loading = ref(false);
// 图片资源分享
const share = ref({
url: '',
Markdown: '',
html: '',
bbCode: ''
});
// 表单数据
const { form, resetFields, assignFields } = useFormData<FileRecord>({
id: 0,
name: '',
comments: ''
});
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
fileName: [
{
required: true,
message: '请上传文件',
type: 'string',
trigger: 'blur',
validator: async (_rule: RuleObject) => {
if (!isUpdate.value && fileName.value.length == 0) {
return Promise.reject('请上传文件');
}
return Promise.resolve();
}
}
],
name: [
{
required: true,
message: '请输入文件名称',
type: 'string',
trigger: 'blur'
}
]
});
// 上传文件
const onUpload = (item) => {
const { file } = item;
if (!file.type.startsWith('video')) {
message.error('文件格式不正确！');
return;
}
if (file.size / 1024 / 1024 > 100) {
message.error('大小不能超过 100MB');
return;
}
const hide = messageLoading({
content: '上传中..',
duration: 0,
mask: true
});
uploadFile(file)
.then((data) => {
hide();
fileName.value = String(data.name);
// images.value.push({
// uid: data.id,
// url: FILE_THUMBNAIL + data.path,
// status: 'done'
// });
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
hide();
});
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const saveOrUpdate = isUpdate.value ? updateFiles : addFiles;
saveOrUpdate(form)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
assignFields(props.data);
// 图片分享代码
share.value.url = `${props.data.url}`;
share.value.html = `<a href="${props.data.url}"><img src="${props.data.url}" alt="${props.data.name}" border="0" /></a>`;
share.value.Markdown = `[![${props.data.name}](${props.data.url})](${props.data.url})`;
share.value.bbCode = `[url=${props.data.url}][img]${props.data.url}[/img][/url]`;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>

114
src/views/baocan/cookbook/image.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div class="page">
<a-row :gutter="20">
<a-col
v-for="(item, index) in data"
:key="index"
v-bind="
styleResponsive
? { xl: 5, lg: 8, md: 12, sm: 12, xs: 24 }
: { span: 6 }
"
>
<a-card :bordered="false" hoverable style="margin-top: 16px" @click="openEdit(item)">
<template #cover>
<img :src="item.url" alt="" :width="120" :height="180" />
</template>
<a-card-meta :title="item.name">
<template #description>
<div
class="project-list-desc"
v-if="item.comments"
:title="item.comments"
>
{{ item.comments }}
</div>
</template>
</a-card-meta>
<div class="ele-cell">
<div class="ele-cell-content ele-text-secondary">
<!-- <a-tooltip :title="item.createNickname" placement="top">-->
<!-- <a-avatar :src="item.avatar" size="small" />-->
<!-- </a-tooltip>-->
{{ timeAgo(item.createTime) }}
</div>
<a-button type="primary" @click="openEdit(item)">
加入菜品
</a-button>
</div>
</a-card>
</a-col>
</a-row>
<!-- 编辑弹窗 -->
<PhotoEdit v-model:visible="showEdit" :data="current" @done="query" />
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import { FileRecord, FileRecordParam } from '@/api/system/file/model';
import PhotoEdit from './components/photo-edit.vue';
import { timeAgo } from 'ele-admin-pro';
const props = defineProps<{
// 搜索关键字
searchText: string;
// 搜索条件
where?: FileRecordParam | null;
// 修改回显的数据
data?: FileRecord | null;
}>();
// 当前编辑数据
const current = ref<FileRecord | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
const emit = defineEmits<{
(e: 'done'): void;
}>();
/* 打开编辑弹窗 */
const openEdit = (row?: FileRecord) => {
current.value = row ?? null;
showEdit.value = true;
};
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const query = () => {
emit('done');
};
watch(
() => props.data,
(visible) => {
if (visible) {
console.log(props.data);
} else {
}
}
);
</script>
<script lang="ts">
export default {
name: 'PhotoImage'
};
</script>
<style lang="less" scoped>
.project-list-desc {
height: 44px;
line-height: 22px;
margin-bottom: 20px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>

142
src/views/baocan/cookbook/index.vue Normal file
View File

@@ -0,0 +1,142 @@
<template>
<div class="page">
<a-page-header :ghost="false" title="常用菜谱">
<div class="ele-text-secondary"> 发布分享和完善有菜谱库 </div>
<template #footer>
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="家常菜谱" />
<a-tab-pane key="2" tab="中国菜谱" />
<a-tab-pane key="3" tab="烘焙" />
<a-tab-pane key="4" tab="外国菜谱" />
<a-tab-pane key="5" tab="食材大全" />
<template #rightExtra v-if="activeKey === '1'">
<div style="margin-bottom: 10px">
<a-button
type="primary"
class="ele-btn-icon"
v-permission="'shop:goods:save'"
@click="add"
>
<template #icon>
<PlusOutlined />
</template>
<span>发布菜谱</span>
</a-button>
<a-input-search
allow-clear
style="width: 240px; margin-left: 10px"
v-model:value="searchText"
placeholder="请输入关键词"
@search="query"
@pressEnter="query"
/>
</div>
</template>
</a-tabs>
</template>
</a-page-header>
<div class="ele-body" v-if="activeKey === '1'">
<Image :data="data" :where="where" @done="query" />
<div class="ele-text-center" style="margin-top: 38px">
<a-pagination
:total="count"
v-model:current="page"
v-model:page-size="limit"
show-quick-jumper
:show-total="(total) => `共 ${total} 条`"
@change="query"
/>
</div>
</div>
<div class="ele-body" v-if="activeKey === '2'">
<List :data="data" :where="where" />
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { FileRecord, FileRecordParam } from '@/api/system/file/model';
import Image from './image.vue';
import List from './list.vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { pageFiles, uploadFile } from '@/api/system/file';
import { message } from 'ant-design-vue/es';
const type = ref('name');
const searchText = ref('');
const data = ref<FileRecord[]>([]);
// 当前选项卡
const activeKey = ref('1');
// 第几页
const page = ref(1);
// 每页多少条
const limit = ref(12);
// 总数量
const count = ref(0);
// 搜索表单
const where = reactive<FileRecordParam>({
name: '',
createNickname: ''
});
/* 查询数据 */
const query = () => {
console.log('query()');
if (type.value == 'name') {
where.name = searchText.value;
}
if (type.value == 'createNickname') {
where.createNickname = searchText.value;
}
where.page = page.value;
where.limit = limit.value;
where.contentType = 'image';
console.log(where);
pageFiles(where).then((res) => {
count.value = Number(res?.count);
data.value = res?.list;
});
};
query();
// 上传文件
const onUpload = (item) => {
const { file } = item;
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return;
}
if (file.size / 1024 / 1024 > 10) {
message.error('大小不能超过 10MB');
return;
}
uploadFile(file)
.then((data) => {
message.success('发布成功');
query();
})
.catch((e) => {
message.error(e.message);
});
};
</script>
<script lang="ts">
export default {
name: 'PhotoIndex'
};
</script>
<style lang="less" scoped>
.project-list-desc {
height: 44px;
line-height: 22px;
margin-bottom: 20px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>

299
src/views/baocan/cookbook/list.vue Normal file
View File

@@ -0,0 +1,299 @@
<template>
<div class="page">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="id"
:columns="columns"
:datasource="datasource"
v-model:selection="selection"
:scroll="{ x: 800 }"
cache-key="proCmsVideoTable"
>
<template #toolbar>
<a-space>
<a-upload
:show-upload-list="false"
:accept="'image/*'"
:customRequest="onUpload"
>
<a-button type="primary" class="ele-btn-icon">
<template #icon>
<UploadOutlined />
</template>
<span>上传图片</span>
</a-button>
</a-upload>
<a-button
danger
type="primary"
class="ele-btn-icon"
v-if="selection.length > 0"
@click="removeBatch"
>
<template #icon>
<delete-outlined />
</template>
<span>删除</span>
</a-button>
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入关键词"
@search="reload"
@pressEnter="reload"
>
<template #addonBefore>
<a-select
v-model:value="type"
style="width: 100px; margin: -5px -12px"
>
<a-select-option value="name">文件名称</a-select-option>
<a-select-option value="createNickname">
上传人
</a-select-option>
</a-select>
</template>
</a-input-search>
</a-space>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'path'">
<a-image :src="record.url" :width="120" />
</template>
<template v-if="column.dataIndex === 'name'">
<span>{{ record.name }}</span>
<copy-outlined
style="padding-left: 4px"
@click="openEdit(record)"
/>
</template>
<template v-if="column.dataIndex === 'comments'">
<span @click="openEdit(record)">{{ record.comments }}</span>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm
placement="topRight"
title="确定要删除此评价吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<PhotoEdit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue/es';
import {
UploadOutlined,
DeleteOutlined,
CopyOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro/es';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { messageLoading, toDateString } from 'ele-admin-pro/es';
import PhotoEdit from './components/photo-edit.vue';
import {
pageFiles,
removeFile,
removeFiles,
uploadFile
} from '@/api/system/file/index';
import type {
FileRecord,
FileRecordParam
} from '@/api/system/file/model/index';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格选中数据
const selection = ref<FileRecord[]>([]);
// 当前编辑数据
const current = ref<FileRecord | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
const type = ref('name');
const searchText = ref('');
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '图片',
dataIndex: 'path',
width: 180,
key: 'path'
},
{
title: '文件名称',
dataIndex: 'name'
},
{
title: '描述',
dataIndex: 'comments',
ellipsis: true
},
{
title: '文件大小',
dataIndex: 'length',
sorter: true,
showSorterTooltip: false,
ellipsis: true,
customRender: ({ text }) => {
if (text < 1024) {
return text + 'B';
} else if (text < 1024 * 1024) {
return (text / 1024).toFixed(1) + 'KB';
} else if (text < 1024 * 1024 * 1024) {
return (text / 1024 / 1024).toFixed(1) + 'M';
} else {
return (text / 1024 / 1024 / 1024).toFixed(1) + 'G';
}
},
width: 120
},
{
title: '发布者',
width: 120,
dataIndex: 'createNickname'
},
{
title: '发布时间',
dataIndex: 'createTime',
sorter: true,
width: 180,
showSorterTooltip: false,
ellipsis: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center'
}
]);
// 表格数据源
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
where = {};
if (type.value == 'name') {
where.name = searchText.value;
}
if (type.value == 'createNickname') {
where.createNickname = searchText.value;
}
where.contentType = 'image';
return pageFiles({ ...where, ...orders, page, limit });
};
/* 搜索 */
const reload = (where?: FileRecordParam) => {
selection.value = [];
tableRef?.value?.reload({ page: 1, where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: FileRecord) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 删除单个 */
const remove = (row: FileRecord) => {
const hide = messageLoading('请求中..', 0);
removeFile(row.id)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = messageLoading('请求中..', 0);
removeFiles(selection.value.map((d) => d.id))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
// 上传文件
const onUpload = (item) => {
const { file } = item;
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return;
}
if (file.size / 1024 / 1024 > 10) {
message.error('大小不能超过 10MB');
return;
}
const hide = messageLoading({
content: '上传中..',
duration: 0,
mask: true
});
uploadFile(file)
.then((data) => {
hide();
message.success('上传成功');
reload();
})
.catch((e) => {
message.error(e.message);
hide();
});
};
</script>
<script lang="ts">
export default {
name: 'VideoIndex'
};
</script>

124
src/views/baocan/cookbook/player/index.vue Normal file
View File

@@ -0,0 +1,124 @@
<!-- 角色编辑弹窗 -->
<template>
<div class="page">
<a-page-header :ghost="false" :title="form.name">
<div class="ele-text-secondary">
{{ form.comments }}
</div>
</a-page-header>
<div class="ele-body">
<a-card :bordered="false" style="width: 70%">
<ele-xg-player
:config="{
id: 'demoPlayer1',
lang: 'zh-cn',
fluid: true,
// 视频地址
url: FILE_SERVER + form.path,
// 封面
poster: '',
// 开启倍速播放
playbackRate: [0.5, 1, 1.5, 2],
// 开启画中画
pip: true
}"
@player="onPlayer1"
/>
</a-card>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, unref } from 'vue';
import Player from 'xgplayer';
import { useRouter } from 'vue-router';
import { toDateString } from 'ele-admin-pro';
import { setPageTabTitle } from '@/utils/page-tab-util';
import { message } from 'ant-design-vue/es';
import useFormData from '@/utils/use-form-data';
import { FileRecord } from '@/api/system/file/model';
import { getFile } from '@/api/system/file';
const { currentRoute } = useRouter();
import { FILE_SERVER } from '@/config/setting';
const ROUTE_PATH = '/cms/video/player';
// 视频播放器一实例
let player1: Player;
// 视频播放器一是否实例化完成
const ready1 = ref(false);
// 视频播放器一配置
const config1 = reactive({
id: 'demoPlayer1',
lang: 'zh-cn',
fluid: true,
// 视频地址
url: 'https://file.wsdns.cn/20221126/cf17ef352db54bf28efeda268107714f.mp4',
// 封面
poster:
'https://file.wsdns.cn/20221125/49f0c461d61e48f28b324366a0a63a2e.jpg',
// 开启倍速播放
playbackRate: [0.5, 1, 1.5, 2],
// 开启画中画
pip: true
});
/* 播放器一渲染完成 */
const onPlayer1 = (player: Player) => {
player1 = player;
player1.on('play', () => {
ready1.value = true;
});
};
// 视频信息
const { form, assignFields } = useFormData<FileRecord>({
id: 0,
name: '',
url: '',
path: '',
comments: '',
createNickname: '',
createTime: ''
});
// 请求状态
const loading = ref(true);
/* */
const query = () => {
const { query } = unref(currentRoute);
const id = query.id;
if (!id || form.id === Number(id)) {
return;
}
loading.value = true;
getFile(Number(id))
.then((data) => {
loading.value = false;
assignFields({
...data,
createTime: toDateString(data.createTime)
});
// 修改页签标题
if (unref(currentRoute).path === ROUTE_PATH) {
setPageTabTitle(String(data.comments));
}
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
};
watch(
currentRoute,
(route) => {
const { path } = unref(route);
if (path !== ROUTE_PATH) {
return;
}
query();
},
{ immediate: true }
);
</script>

229
src/views/baocan/department/components/org-edit.vue Normal file
View File

@@ -0,0 +1,229 @@
<!-- 机构编辑弹窗 -->
<template>
<ele-modal
:width="620"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '修改机构' : '添加机构'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 7, sm: 24 } : { flex: '90px' }"
:wrapper-col="styleResponsive ? { md: 17, sm: 24 } : { flex: '1' }"
>
<a-row :gutter="16">
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="上级机构" name="parentId">
<org-select
:data="organizationList"
placeholder="请选择上级机构"
v-model:value="form.parentId"
/>
</a-form-item>
<a-form-item label="机构名称" name="organizationName">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入机构名称"
v-model:value="form.organizationName"
/>
</a-form-item>
<a-form-item label="机构全称" name="organizationFullName">
<a-input
allow-clear
:maxlength="100"
placeholder="请输入机构全称"
v-model:value="form.organizationFullName"
/>
</a-form-item>
<a-form-item label="机构代码">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入机构代码"
v-model:value="form.organizationCode"
/>
</a-form-item>
</a-col>
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="机构类型" name="organizationType">
<org-type-select v-model:value="form.organizationType" />
</a-form-item>
<a-form-item label="排序号" name="sortNumber">
<a-input-number
:min="0"
:max="99999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="备注">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入备注"
v-model:value="form.comments"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue/es';
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import OrgSelect from './org-select.vue';
import OrgTypeSelect from './org-type-select.vue';
import {
addOrganization,
updateOrganization
} from '@/api/system/organization';
import type { Organization } from '@/api/system/organization/model';
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Organization | null;
// 机构id
organizationId?: number;
// 全部机构
organizationList: Organization[];
}>();
//
const formRef = ref<FormInstance | null>(null);
// 是否是修改
const isUpdate = ref(false);
// 提交状态
const loading = ref(false);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Organization>({
organizationId: undefined,
parentId: undefined,
organizationName: '',
organizationFullName: '',
organizationCode: '',
organizationType: undefined,
sortNumber: undefined,
comments: ''
});
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
organizationName: [
{
required: true,
message: '请输入机构名称',
type: 'string',
trigger: 'blur'
}
],
organizationFullName: [
{
required: true,
message: '请输入机构全称',
type: 'string',
trigger: 'blur'
}
],
organizationType: [
{
required: true,
message: '请选择机构类型',
type: 'string',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
message: '请输入排序号',
type: 'number',
trigger: 'blur'
}
]
});
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const orgData = {
...form,
parentId: form.parentId || 0
};
const saveOrUpdate = isUpdate.value
? updateOrganization
: addOrganization;
saveOrUpdate(orgData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
assignFields(props.data);
isUpdate.value = true;
} else {
form.parentId = props.organizationId;
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>

39
src/views/baocan/department/components/org-select.vue Normal file
View File

@@ -0,0 +1,39 @@
<!-- 机构选择下拉框 -->
<template>
<a-tree-select
allow-clear
tree-default-expand-all
:placeholder="placeholder"
:value="value || undefined"
:tree-data="data"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
@update:value="updateValue"
/>
</template>
<script lang="ts" setup>
import type { Organization } from '@/api/system/organization/model';
const emit = defineEmits<{
(e: 'update:value', value?: number): void;
}>();
withDefaults(
defineProps<{
// 选中的数据(v-modal)
value?: number;
// 提示信息
placeholder?: string;
// 机构数据
data: Organization[];
}>(),
{
placeholder: '请选择角色'
}
);
/* 更新选中数据 */
const updateValue = (value?: number) => {
emit('update:value', value);
};
</script>

39
src/views/baocan/department/components/org-type-select.vue Normal file
View File

@@ -0,0 +1,39 @@
<!-- 机构类型选择下拉框 -->
<template>
<a-select
allow-clear
:value="value"
:placeholder="placeholder"
@update:value="updateValue"
>
<a-select-option v-for="item in data" :key="item.label" :value="item.value">
{{ item.label }}
</a-select-option>
</a-select>
</template>
<script lang="ts" setup>
import { getDictionaryOptions } from '@/utils/common';
const emit = defineEmits<{
(e: 'update:value', value: string): void;
}>();
withDefaults(
defineProps<{
value?: string;
placeholder?: string;
}>(),
{
placeholder: '请选择机构类型'
}
);
// 机构类型数据
const data = getDictionaryOptions('organizationType');
/* 更新选中数据 */
const updateValue = (value: string) => {
emit('update:value', value);
};
</script>

295
src/views/baocan/department/components/org-user-edit.vue Normal file
View File

@@ -0,0 +1,295 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="800"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '修改用户' : '新建用户'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 7, sm: 24 } : { flex: '90px' }"
:wrapper-col="styleResponsive ? { md: 17, sm: 24 } : { flex: '1' }"
>
<a-row :gutter="16">
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="所属机构">
<org-select
:data="organizationList"
placeholder="请选择所属机构"
v-model:value="form.organizationId"
/>
</a-form-item>
<a-form-item label="账号" name="username">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入用户账号"
v-model:value="form.username"
/>
</a-form-item>
<a-form-item label="姓名" name="realName">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入真实姓名"
v-model:value="form.realName"
/>
</a-form-item>
<a-form-item label="性别" name="sex">
<sex-select v-model:value="form.sex" />
</a-form-item>
<a-form-item label="角色" name="roleIds">
<role-select v-model:value="form.roles" />
</a-form-item>
</a-col>
<a-col
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="手机号" name="phone">
<a-input
allow-clear
:maxlength="11"
placeholder="请输入手机号"
v-model:value="form.phone"
/>
</a-form-item>
<a-form-item label="邮箱" name="email">
<a-input
allow-clear
:maxlength="100"
placeholder="请输入邮箱"
v-model:value="form.email"
/>
</a-form-item>
<a-form-item label="出生日期">
<a-date-picker
class="ele-fluid"
value-format="YYYY-MM-DD"
placeholder="请选择出生日期"
v-model:value="form.birthday"
/>
</a-form-item>
<a-form-item v-if="!isUpdate" label="登录密码" name="password">
<a-input-password
:maxlength="20"
v-model:value="form.password"
placeholder="请输入登录密码"
/>
</a-form-item>
<a-form-item label="个人简介">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入个人简介"
v-model:value="form.introduction"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue/es';
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import { emailReg, phoneReg } from 'ele-admin-pro/es';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import OrgSelect from './org-select.vue';
import RoleSelect from './role-select.vue';
import SexSelect from './sex-select.vue';
import { addUser, updateUser, checkExistence } from '@/api/system/user';
import type { User } from '@/api/system/user/model';
import type { Organization } from '@/api/system/organization/model';
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: User | null;
// 全部机构
organizationList: Organization[];
// 机构id
organizationId?: number;
}>();
//
const formRef = ref<FormInstance | null>(null);
// 是否是修改
const isUpdate = ref(false);
// 提交状态
const loading = ref(false);
// 表单数据
const { form, resetFields, assignFields } = useFormData<User>({
userId: undefined,
organizationId: undefined,
username: '',
nickname: '',
realName: '',
sex: undefined,
roles: [],
email: '',
phone: '',
password: '',
introduction: ''
});
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
username: [
{
required: true,
type: 'string',
validator: (_rule: Rule, value: string) => {
return new Promise<void>((resolve, reject) => {
if (!value) {
return reject('请输入用户账号');
}
checkExistence('username', value, props.data?.userId)
.then(() => {
reject('账号已经存在');
})
.catch(() => {
resolve();
});
});
},
trigger: 'blur'
}
],
nickname: [
{
required: true,
message: '请输入昵称',
type: 'string',
trigger: 'blur'
}
],
realName: [
{
required: true,
message: '请输入真实姓名',
type: 'string',
trigger: 'blur'
}
],
// sex: [
// {
// required: true,
// message: '请选择性别',
// type: 'string',
// trigger: 'blur'
// }
// ],
// roleIds: [
// {
// required: true,
// message: '请选择角色',
// type: 'array',
// trigger: 'blur'
// }
// ],
email: [
{
pattern: emailReg,
message: '邮箱格式不正确',
type: 'string',
trigger: 'blur'
}
],
password: [
{
required: true,
type: 'string',
validator: async (_rule: Rule, value: string) => {
if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
return Promise.resolve();
}
return Promise.reject('密码必须为5-18位非空白字符');
},
trigger: 'blur'
}
],
phone: [
{
pattern: phoneReg,
message: '手机号格式不正确',
type: 'string',
trigger: 'blur'
}
]
});
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
form.nickname = form.realName;
form.alias = form.realName;
const saveOrUpdate = isUpdate.value ? updateUser : addUser;
saveOrUpdate(form)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
assignFields(props.data);
isUpdate.value = true;
} else {
form.organizationId = props.organizationId;
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>

239
src/views/baocan/department/components/org-user-list.vue Normal file
View File

@@ -0,0 +1,239 @@
<template>
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="userId"
:columns="columns"
:datasource="datasource"
height="calc(100vh - 290px)"
tool-class="ele-toolbar-form"
:scroll="{ x: 800 }"
tools-theme="default"
bordered
cache-key="proSystemOrgUserTable"
class="sys-org-table"
>
<template #toolbar>
<org-user-search @search="reload" @add="openEdit()" />
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'roles'">
<a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
{{ item.roleName }}
</a-tag>
</template>
<template v-else-if="column.key === 'status'">
<a-switch
:checked="record.status === 0"
@change="(checked: boolean) => editStatus(checked, record)"
/>
</template>
<template v-if="column.key === 'balance'">
<span class="ele-text-success">
￥{{ formatNumber(record.balance) }}
</span>
</template>
<template v-else-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
placement="topRight"
title="确定要删除此用户吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
<!-- 编辑弹窗 -->
<org-user-edit
:data="current"
v-model:visible="showEdit"
:organization-list="organizationList"
:organization-id="organizationId"
@done="reload"
/>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { message } from 'ant-design-vue/es';
import type { EleProTable } from 'ele-admin-pro/es';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { messageLoading } from 'ele-admin-pro/es';
import OrgUserSearch from './org-user-search.vue';
import OrgUserEdit from './org-user-edit.vue';
import { timeAgo } from 'ele-admin-pro';
import { formatNumber } from 'ele-admin-pro/es';
import { pageUsers, removeUser, updateUserStatus } from '@/api/system/user';
import type { User, UserParam } from '@/api/system/user/model';
import type { Organization } from '@/api/system/organization/model';
const props = defineProps<{
// 机构 id
organizationId?: number;
// 全部机构
organizationList: Organization[];
}>();
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '用户ID',
dataIndex: 'userId',
sorter: true,
showSorterTooltip: false
},
{
title: '用户账号',
dataIndex: 'username',
sorter: true,
showSorterTooltip: false
},
{
title: '姓名',
dataIndex: 'realName',
sorter: true,
showSorterTooltip: false
},
{
title: '余额',
dataIndex: 'balance',
key: 'balance',
sorter: true,
showSorterTooltip: false
},
{
title: '性别',
dataIndex: 'sexName',
width: 80,
align: 'center',
showSorterTooltip: false,
hideInTable: true,
ellipsis: true
},
{
title: '角色',
key: 'roles'
},
{
title: '创建时间',
dataIndex: 'createTime',
sorter: true,
showSorterTooltip: false,
hideInTable: true,
ellipsis: true,
customRender: ({ text }) => timeAgo(text)
},
{
title: '状态',
key: 'status',
sorter: true,
showSorterTooltip: false,
width: 80,
align: 'center'
},
{
title: '操作',
key: 'action',
width: 100,
align: 'center'
}
]);
// 当前编辑数据
const current = ref<User | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 表格数据源
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
if (props.organizationId) {
where.organizationId = props.organizationId;
}
return pageUsers({
...where,
...orders,
page,
limit
});
};
/* 搜索 */
const reload = (where?: UserParam) => {
tableRef?.value?.reload({ page: 1, where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: User) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 删除单个 */
const remove = (row: User) => {
const hide = messageLoading('请求中..', 0);
removeUser(row.userId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 修改用户状态 */
const editStatus = (checked: boolean, row: User) => {
const status = checked ? 0 : 1;
updateUserStatus(row.userId, status)
.then((msg) => {
row.status = status;
message.success(msg);
})
.catch((e) => {
message.error(e.message);
});
};
// 监听机构 id 变化
watch(
() => props.organizationId,
() => {
reload();
}
);
</script>
<style lang="less" scoped>
.sys-org-table :deep(.ant-table-body) {
overflow: auto !important;
overflow: overlay !important;
}
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
padding: 0 4px;
margin-bottom: 0;
}
</style>

83
src/views/baocan/department/components/org-user-search.vue Normal file
View File

@@ -0,0 +1,83 @@
<!-- 搜索表单 -->
<template>
<a-row :gutter="16">
<a-col
v-bind="
styleResponsive ? { xl: 6, lg: 8, md: 12, sm: 24, xs: 24 } : { span: 6 }
"
>
<a-input
v-model:value.trim="form.keywords"
placeholder="请输入关键词"
allow-clear
/>
</a-col>
<!-- <a-col-->
<!-- v-bind="-->
<!-- styleResponsive ? { xl: 6, lg: 8, md: 12, sm: 24, xs: 24 } : { span: 6 }-->
<!-- "-->
<!-- >-->
<!-- <a-input-->
<!-- v-model:value.trim="form.nickname"-->
<!-- placeholder="请输入昵称"-->
<!-- allow-clear-->
<!-- />-->
<!-- </a-col>-->
<a-col
v-bind="
styleResponsive
? { xl: 12, lg: 8, md: 24, sm: 24, xs: 24 }
: { span: 12 }
"
>
<a-space :size="10" style="flex-wrap: wrap">
<a-button type="primary" class="ele-btn-icon" @click="search">
<template #icon>
<search-outlined />
</template>
<span>查询</span>
</a-button>
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<plus-outlined />
</template>
<span>新建</span>
</a-button>
</a-space>
</a-col>
</a-row>
</template>
<script lang="ts" setup>
import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import type { UserParam } from '@/api/system/user/model';
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const emit = defineEmits<{
(e: 'search', where?: UserParam): void;
(e: 'add'): void;
}>();
// 表单数据
const { form } = useFormData<UserParam>({
keywords: '',
username: '',
nickname: ''
});
/* 搜索 */
const search = () => {
emit('search', form);
};
/* 添加 */
const add = () => {
emit('add');
};
</script>

71
src/views/baocan/department/components/role-select.vue Normal file
View File

@@ -0,0 +1,71 @@
<!-- 角色选择下拉框 -->
<template>
<a-select
allow-clear
mode="multiple"
:value="roleIds"
:placeholder="placeholder"
@update:value="updateValue"
@blur="onBlur"
>
<a-select-option
v-for="item in data"
:key="item.roleId"
:value="item.roleId"
>
{{ item.roleName }}
</a-select-option>
</a-select>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { message } from 'ant-design-vue/es';
import { listRoles } from '@/api/system/role';
import type { Role } from '@/api/system/role/model';
const emit = defineEmits<{
(e: 'update:value', value: Role[]): void;
(e: 'blur'): void;
}>();
const props = withDefaults(
defineProps<{
// 选中的角色
value?: Role[];
//
placeholder?: string;
}>(),
{
placeholder: '请选择角色'
}
);
// 选中的角色id
const roleIds = computed(() => props.value?.map((d) => d.roleId as number));
// 角色数据
const data = ref<Role[]>([]);
/* 更新选中数据 */
const updateValue = (value: number[]) => {
emit(
'update:value',
value.map((v) => ({ roleId: v }))
);
};
/* 获取角色数据 */
listRoles()
.then((list) => {
data.value = list;
})
.catch((e) => {
message.error(e.message);
});
/* 失去焦点 */
const onBlur = () => {
emit('blur');
};
</script>

45
src/views/baocan/department/components/sex-select.vue Normal file
View File

@@ -0,0 +1,45 @@
<!-- 角色选择下拉框 -->
<template>
<a-select
show-search
optionFilterProp="label"
:options="data"
allow-clear
:value="value"
:placeholder="placeholder"
@update:value="updateValue"
@blur="onBlur"
/>
</template>
<script lang="ts" setup>
import { getDictionaryOptions } from '@/utils/common';
const emit = defineEmits<{
(e: 'update:value', value: string): void;
(e: 'blur'): void;
}>();
withDefaults(
defineProps<{
value?: string;
placeholder?: string;
}>(),
{
placeholder: '请选择性别'
}
);
// 字典数据
const data = getDictionaryOptions('sex');
/* 更新选中数据 */
const updateValue = (value: string) => {
emit('update:value', value);
};
/* 失去焦点 */
const onBlur = () => {
emit('blur');
};
</script>

212
src/views/baocan/department/index.vue Normal file
View File

@@ -0,0 +1,212 @@
<template>
<div class="ele-body">
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-split-layout
width="266px"
allow-collapse
:right-style="{ overflow: 'hidden' }"
:style="{ minHeight: 'calc(100vh - 152px)' }"
>
<div>
<ele-toolbar theme="default">
<a-space :size="10">
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
<template #icon>
<plus-outlined />
</template>
<span>新建</span>
</a-button>
<a-button
type="primary"
:disabled="!current"
class="ele-btn-icon"
@click="openEdit(current)"
>
<template #icon>
<edit-outlined />
</template>
<span>修改</span>
</a-button>
<a-button
danger
type="primary"
:disabled="!current"
class="ele-btn-icon"
@click="remove"
>
<template #icon>
<delete-outlined />
</template>
<span>删除</span>
</a-button>
</a-space>
</ele-toolbar>
<div class="ele-border-split sys-organization-list">
<a-tree
:tree-data="(data as any)"
v-model:expanded-keys="expandedRowKeys"
v-model:selected-keys="selectedRowKeys"
@select="onTreeSelect"
/>
</div>
</div>
<template #content>
<org-user-list
v-if="current"
:organization-list="data"
:organization-id="current.organizationId"
/>
</template>
</ele-split-layout>
</a-card>
<!-- 编辑弹窗 -->
<org-edit
v-model:visible="showEdit"
:data="editData"
:organization-list="data"
:organization-id="current?.organizationId"
@done="query"
/>
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue/es';
import {
PlusOutlined,
EditOutlined,
DeleteOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import { messageLoading, toTreeData, eachTreeData } from 'ele-admin-pro/es';
import OrgUserList from './components/org-user-list.vue';
import OrgEdit from './components/org-edit.vue';
import {
listOrganizations,
removeOrganization
} from '@/api/system/organization';
import type { Organization } from '@/api/system/organization/model';
// 加载状态
const loading = ref(true);
// 树形数据
const data = ref<Organization[]>([]);
// 树展开的key
const expandedRowKeys = ref<number[]>([]);
// 树选中的key
const selectedRowKeys = ref<number[]>([]);
// 选中数据
const current = ref<Organization | null>(null);
// 是否显示表单弹窗
const showEdit = ref(false);
// 编辑回显数据
const editData = ref<Organization | null>(null);
/* 查询 */
const query = () => {
loading.value = true;
listOrganizations()
.then((list) => {
loading.value = false;
const eks: number[] = [];
list.forEach((d, i) => {
console.log(d);
if (d.parentId > 0) {
d.title = i + '.' + d.organizationName;
} else {
d.title = d.organizationName;
}
d.key = d.organizationId;
d.value = d.organizationId;
if (typeof d.key === 'number') {
eks.push(d.key);
}
});
expandedRowKeys.value = eks;
data.value = toTreeData({
data: list,
idField: 'organizationId',
parentIdField: 'parentId'
});
if (list.length) {
if (typeof list[0].key === 'number') {
selectedRowKeys.value = [list[0].key];
}
current.value = list[0];
current.value.organizationId = 0;
} else {
selectedRowKeys.value = [];
current.value = null;
}
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
};
/* 选择数据 */
const onTreeSelect = () => {
eachTreeData(data.value, (d) => {
if (typeof d.key === 'number' && selectedRowKeys.value.includes(d.key)) {
current.value = d;
return false;
}
});
};
/* 打开编辑弹窗 */
const openEdit = (item?: Organization | null) => {
editData.value = item ?? null;
showEdit.value = true;
};
/* 删除 */
const remove = () => {
Modal.confirm({
title: '提示',
content: '确定要删除选中的机构吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = messageLoading('请求中..', 0);
removeOrganization(current.value?.organizationId)
.then((msg) => {
hide();
message.success(msg);
query();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
query();
</script>
<script lang="ts">
export default {
name: 'SystemOrganization'
};
</script>
<style lang="less" scoped>
.sys-organization-list {
padding: 12px 6px;
height: calc(100vh - 242px);
border-width: 1px;
border-style: solid;
overflow: auto;
}
</style>

215
src/views/baocan/equipment/components/bc-equipment-edit.vue Normal file
View File

@@ -0,0 +1,215 @@
<!-- 用户编辑弹窗 -->
<template>
<a-drawer
:width="880"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '编辑设备' : '添加设备'"
:body-style="{ paddingBottom: '8px' }"
:footer-style="{ textAlign: 'right' }"
@update:visible="updateVisible"
:maskClosable="isUpdate"
@ok="save"
>
<a-form
ref="formRef"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
:model="form"
:rules="rules"
>
<a-form-item label="设备编码" name="equipmentCode">
<a-input
allow-clear
placeholder="请输入设备编码"
:disabled="isUpdate"
v-model:value="form.equipmentCode"
/>
</a-form-item>
<a-form-item label="所属档口" name="gear">
<a-radio-group v-model:value="form.gear">
<a-radio :value="10">食堂档口</a-radio>
<a-radio :value="20">物品档口</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="设备描述" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入描述内容"
v-model:value="form.comments"
/>
</a-form-item>
<!-- <a-form-item label="启用状态" name="status">-->
<!-- <a-switch :checked="form.status === 0" @change="editStatus" />-->
<!-- </a-form-item>-->
</a-form>
<template #footer>
<a-space>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" @click="save">保存</a-button>
</a-space>
</template>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { BcEquipment } from '@/api/apps/bc/equipment/model';
import { addBcEquipment, updateBcEquipment } from '@/api/apps/bc/equipment';
import { FormInstance, Rule } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: BcEquipment | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 是否是修改
const isUpdate = ref(false);
// 提交状态
const loading = ref(false);
const formRef = ref<FormInstance | null>(null);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<BcEquipment>({
bcEquipmentId: undefined,
equipmentName: undefined,
equipmentCode: '',
gear: 10,
createTime: '',
comments: '',
sortNumber: 100,
status: 0
});
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
equipmentName: [
{
required: true,
message: '请输入设备名称',
type: 'string',
trigger: 'blur'
}
],
equipmentCode: [
{
required: true,
type: 'string',
message: '请填写设备编号',
trigger: 'blur'
}
],
status: [
{
required: true,
type: 'number',
message: '请选择设备状态',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
type: 'number',
message: '请输入排序号',
trigger: 'blur'
}
]
});
/* 控制放店开关 */
const editStatus = () => {
if (form.status == 0) {
form.status = 1;
} else {
form.status = 0;
}
updateBcEquipment(form)
.then(() => {
message.success('操作成功');
})
.catch((e) => {
message.error(e.message);
});
};
const onClose = () => {
updateVisible(false);
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const equipmentForm = {
...form
};
console.log(equipmentForm, 'equipmentForm');
const saveOrUpdate = isUpdate.value
? updateBcEquipment
: addBcEquipment;
saveOrUpdate(equipmentForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data
});
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

107
src/views/baocan/equipment/components/search.vue Normal file
View File

@@ -0,0 +1,107 @@
<!-- 搜索表单 -->
<template>
<a-space>
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<PlusOutlined />
</template>
<span>绑定设备</span>
</a-button>
<a-button
danger
type="primary"
class="ele-btn-icon"
:v-role="`dev`"
@click="removeBatch"
:disabled="props.selection.length === 0"
>
<template #icon>
<DeleteOutlined />
</template>
<span>批量删除</span>
</a-button>
<!-- <a-input-search-->
<!-- allow-clear-->
<!-- v-model:value="searchText"-->
<!-- placeholder="请输入搜索关键词"-->
<!-- @search="search"-->
<!-- @pressEnter="search"-->
<!-- />-->
</a-space>
</template>
<script lang="ts" setup>
import {
PlusOutlined,
EditOutlined,
DeleteOutlined
} from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { EquipmentParam } from '@/api/apps/equipment/model';
import { ref, watch } from 'vue';
const emit = defineEmits<{
(e: 'search', where?: EquipmentParam): void;
(e: 'add'): void;
(e: 'remove'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where } = useSearch<EquipmentParam>({
equipmentId: undefined,
equipmentName: '',
equipmentCode: '',
merchantCode: ''
});
// 下来选项
const type = ref('equipmentCode');
// tabType
// const listType = ref('all');
// 搜索内容
const searchText = ref('');
/* 搜索 */
const search = () => {
where.equipmentName = undefined;
where.equipmentCode = undefined;
where.merchantCode = undefined;
if (type.value == 'equipmentName') {
where.equipmentName = searchText.value;
}
if (type.value == 'equipmentCode') {
where.equipmentCode = searchText.value;
}
if (type.value == 'merchantCode') {
where.merchantCode = searchText.value;
}
emit('search', where);
};
// 新增
const add = () => {
emit('add');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
/* 重置 */
// const reset = () => {
// resetFields();
// search();
// };
// 监听字典id变化
watch(
() => props.selection,
() => {}
);
</script>

225
src/views/baocan/equipment/index.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<div class="page">
<a-page-header :ghost="false" title="设备管理">
<div class="ele-text-secondary"> 绑定的消费机设备管理 </div>
</a-page-header>
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="bcEquipmentId"
:columns="columns"
:height="tableHeight"
:datasource="datasource"
v-model:selection="selection"
>
<template #toolbar>
<search
:selection="selection"
@search="reload"
@add="openEdit"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'comments'">
<span class="ele-text-placeholder">{{ record.comments }}</span>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a-button @click="openEdit(record)">绑定设备</a-button>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<bc-equipment-edit
v-model:visible="showEdit"
:data="current"
@done="reload"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { createVNode, computed, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import BcEquipmentEdit from './components/bc-equipment-edit.vue';
import {
pageBcEquipment,
removeBatchBcEquipment
} from '@/api/apps/bc/equipment';
import type {
BcEquipment,
BcEquipmentParam
} from '@/api/apps/bc/equipment/model';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '设备编号',
dataIndex: 'equipmentCode',
key: 'equipmentCode'
},
{
title: '设备描述',
dataIndex: 'comments',
key: 'comments'
},
{
title: '操作',
key: 'action',
width: 90,
align: 'center',
hideInSetting: true
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
ellipsis: true,
hideInTable: true,
customRender: ({ text }) => toDateString(text)
}
]);
// 表格选中数据
const selection = ref<BcEquipment[]>([]);
// 当前编辑数据
const current = ref<BcEquipment | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 树形数据
// const data = ref<Category[]>([]);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
// if (filters) {
// where.brand = filters.brand;
// }
return pageBcEquipment({ ...where, ...orders, ...filters, page, limit });
};
/* 搜索 */
const reload = (where?: BcEquipmentParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
// 搜索是否展开
const searchExpand = ref(false);
// 表格固定高度
const fixedHeight = ref(false);
// 表格高度
const tableHeight = computed(() => {
return fixedHeight.value
? searchExpand.value
? 'calc(100vh - 618px)'
: 'calc(100vh - 562px)'
: void 0;
});
/* 打开编辑弹窗 */
const openEdit = (row?: BcEquipment) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开用户详情弹窗 */
// const openInfo = (row?: BcEquipment) => {
// current.value = row ?? null;
// showEdit.value = true;
// };
/* 删除单个 */
// const remove = (row: BcEquipment) => {
// const hide = message.loading('请求中..', 0);
// removeBcEquipment(row.bcEquipmentId)
// .then((msg) => {
// hide();
// message.success(msg);
// reload();
// })
// .catch((e) => {
// hide();
// message.error(e.message);
// });
// };
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchBcEquipment(selection.value.map((d) => d.bcEquipmentId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
</script>
<script lang="ts">
export default {
name: 'BcEquipmentIndex'
};
</script>
<style lang="less" scoped>
// 文字超出隐藏(两行)
// 需要设置文字容器的宽度
.twoline-hide {
width: 320px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
</style>

391
src/views/baocan/export/components/order-info.vue Normal file
View File

@@ -0,0 +1,391 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="`80%`"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑订单' : '订单详情'"
:body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
@update:visible="updateVisible"
:maskClosable="false"
:footer="null"
@ok="save"
>
<!-- <a-card class="order-card" :bordered="false">-->
<!-- <a-steps-->
<!-- :current="active"-->
<!-- direction="horizontal"-->
<!-- :responsive="styleResponsive"-->
<!-- >-->
<!-- <template v-for="(item, index) in steps" :key="index">-->
<!-- <a-step-->
<!-- :title="item.title"-->
<!-- :description="timeAgo(item.description)"-->
<!-- />-->
<!-- </template>-->
<!-- </a-steps>-->
<!-- </a-card>-->
<a-card title="订单详情" class="order-card">
<!-- <a-space>-->
<!-- <a-button>发货</a-button>-->
<!-- <a-button>商家备注</a-button>-->
<!-- <a-button>打印小票</a-button>-->
<!-- </a-space>-->
<a-row :gutter="16">
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单号" name="orderId">
<span>{{ order.orderId }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="实付款金额" name="payPrice">
<span class="ele-text-warning"
>￥{{ formatNumber(order.payPrice) }}</span
>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单状态" name="orderStatus">
<a-tag>{{ order.payStatus === 20 ? '已下单' : '' }}</a-tag>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="买家信息" name="deliveryType">
<router-link :to="'/system/user/details?id=' + order.userId">
<span class="ele-text-primary">{{ order.nickname }}</span>
</router-link>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="预定日期" name="deliveryTime">
{{ toDateString(order.deliveryTime, 'yyyy-MM-dd') }}
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="下单时间" name="createTime">
{{ order.createTime }}
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="交易流水号" name="orderNo">
{{ order.orderNo }}
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="买家留言" name="buyerRemark">
<span>{{ order.buyerRemark }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单备注" name="comments">
<span>{{ order.comments }}</span>
</a-form-item>
</a-col>
</a-row>
</a-card>
<a-card title="菜品信息" class="order-card">
<a-spin :spinning="loading">
<a-table
:data-source="orderGoodsList"
:columns="columns"
:pagination="false"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'goodsName'">
<div class="goods-info">
<a-image
v-if="record.imageUrl"
:src="record.imageUrl"
:preview="false"
:width="50"
/>
<div class="info">
<div>{{ record.goodsName }}</div>
<div class="ele-text-placeholder">{{ record.comments }}</div>
</div>
</div>
</template>
</template>
</a-table>
</a-spin>
</a-card>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form } from 'ant-design-vue';
import { assignObject, toDateString } from 'ele-admin-pro';
import { useThemeStore } from '@/store/modules/theme';
import { formatNumber } from 'ele-admin-pro/es';
import { storeToRefs } from 'pinia';
import { Order } from '@/api/order/model';
import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
import { OrderGoods } from '@/api/order/goods/model';
import { getOrder } from '@/api/order';
import { listOrderGoods } from '@/api/order/goods';
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Order | null;
}>();
export interface step {
title?: String | undefined;
subTitle?: String | undefined;
description?: String | undefined;
}
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
const orderGoodsList = ref<OrderGoods[]>([]);
// 步骤条
const steps = ref<step[]>([
{
title: '报餐',
description: undefined
},
{
title: '付款',
description: undefined
},
{
title: '发餐',
description: undefined
},
{
title: '取餐',
description: undefined
},
{
title: '完成',
description: undefined
}
]);
const active = ref(2);
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 订单信息
const order = reactive<Order>({
orderId: undefined,
orderNo: '',
userId: undefined,
orderSourceData: '',
nickname: '',
comments: '',
createTime: undefined,
deliveryTime: '',
payPrice: undefined,
payStatus: undefined
});
// 请求状态
const loading = ref(true);
const { resetFields } = useForm(order);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
const columns = ref<ColumnItem[]>([
// {
// title: '菜品ID',
// dataIndex: 'goodsId'
// },
{
title: '菜品信息',
dataIndex: 'goodsName',
key: 'goodsName'
},
{
title: '菜品价格',
dataIndex: 'goodsPrice',
customRender: ({ text }) => '￥' + text
},
{
title: '购买数量',
dataIndex: 'totalNum',
key: 'totalNum'
}
]);
/* 制作步骤条 */
const loadSteps = (order) => {
steps.value = [];
steps.value.push({
title: '下单'
});
steps.value.push({
title: '付款'
});
steps.value.push({
title: '发货'
});
steps.value.push({
title: '收货'
});
steps.value.push({
title: '完成'
});
// 下单
if (order.payStatus == 10) {
active.value = 0;
steps.value[0].description = order.createTime;
}
// 付款
if (order.payStatus == 20) {
active.value = 1;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
}
// 发货
if (order.payStatus == 20 && order.deliveryStatus == 20) {
active.value = 2;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
}
// 收货
if (order.payStatus == 20 && order.receiptStatus == 20) {
active.value = 3;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
steps.value[3].description = order.receiptTime;
}
// 完成
if (order.payStatus == 20 && order.orderStatus == 30) {
active.value = 4;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
steps.value[3].description = order.receiptTime;
}
// 已取消
if (order.orderStatus == 20) {
active.value = 4;
}
};
const queryOrder = () => {
var orderId = props.data?.orderId;
getOrder(orderId).then((res) => {
assignObject(order, res);
});
};
const getOrderGoods = () => {
const orderId = props.data?.orderId;
listOrderGoods({ orderId }).then((data) => {
orderGoodsList.value = data;
});
};
/* 保存编辑 */
const save = () => {};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
queryOrder();
// assignObject(order, props.data);
loadSteps(props.data);
getOrderGoods();
}
} else {
resetFields();
}
}
);
</script>
<style lang="less" scoped>
.order-card {
margin-bottom: 20px;
}
.ant-form-item {
margin-bottom: 5px;
}
.goods-info {
display: flex;
.info {
padding-left: 5px;
display: flex;
flex-direction: column;
}
}
</style>

184
src/views/baocan/export/components/search.vue Normal file
View File

@@ -0,0 +1,184 @@
<!-- 搜索表单 -->
<template>
<div class="search">
<a-space :size="10" style="flex-wrap: wrap">
<SelectOrganization
:placeholder="`请选择部门`"
v-model:value="organizationName"
@done="chooseOrganization"
/>
<!-- <a-date-picker-->
<!-- placeholder="预定日期"-->
<!-- value-format="YYYY-MM-DD"-->
<!-- v-model:value="where.deliveryTime"-->
<!-- @change="search"-->
<!-- />-->
<a-range-picker
v-model:value="dateRange"
@change="search"
value-format="YYYY-MM-DD"
class="ele-fluid"
/>
<a-button type="primary" @click="reset">统计</a-button>
<a-button type="primary" class="ele-btn-icon" @click="handleExport">
<template #icon>
<download-outlined />
</template>
<span>导出</span>
</a-button>
</a-space>
</div>
</template>
<script lang="ts" setup>
import {
PlusOutlined,
DeleteOutlined,
DownloadOutlined
} from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import { ref, watch } from 'vue';
import { Organization } from '@/api/system/organization/model';
import { BcExportParam } from '@/api/apps/bc/export/model';
import { toDateString } from 'ele-admin-pro';
import ExcelJS from 'exceljs';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
exportData?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: BcExportParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'done'): void;
}>();
// 表单数据
const { where, resetFields } = useSearch<BcExportParam>({
exportId: undefined,
keywords: undefined,
organizationId: undefined
});
// 下来选项
// const categoryId = ref<number>(0);
const post = ref<number>(0);
const sign = ref<number>(0);
const noSign = ref<number>(0);
const organizationName = ref<string>();
const exportTitle = `贵港资源报餐人员统计`;
// 请求状态
// const loading = ref(true);
// const deliveryStatus = ref<number>(0);
// const gear = ref<number>(0);
// 预定日期
// const deliveryTime = ref<Dayjs>();
// 日期范围选择
const dateRange = ref<[string, string]>([
toDateString(new Date(), 'YYYY-MM-dd 00:00:00'),
toDateString(new Date(), 'YYYY-MM-dd 00:00:00')
]);
/* 搜索 */
const search = () => {
const [d1, d2] = dateRange.value ?? [];
where.deliveryTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
where.deliveryTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
// where.deliveryTime = where.deliveryTime
// ? where.deliveryTime + ' 00:00:00'
// : undefined;
emit('search', {
...where
});
};
const chooseOrganization = (data: Organization) => {
organizationName.value = data.organizationName;
where.organizationId = data.organizationId;
// 查询全部
if (data.organizationId == 52) {
where.organizationId = undefined;
}
search();
};
/* 重置 */
const reset = () => {
resetFields();
post.value = 0;
sign.value = 0;
noSign.value = 0;
search();
};
// 导出
const handleExport = async () => {
if (!props.selection?.length) {
emit('done');
return;
}
// 创建工作簿
const workbook = new ExcelJS.Workbook();
// 添加工作表
const sheet = workbook.addWorksheet(exportTitle, {
headerFooter: { firstHeader: 'Hello Exceljs' }
});
const style: ExcelJS.Style = {
alignment: { horizontal: 'center' }
};
sheet.columns = [
{ header: '部门', key: 'organizationName', style, width: 30 },
{ header: '编号', key: 'userId', style, width: 20 },
{ header: '姓名', key: 'nickname', style, width: 20 },
{ header: '早餐报餐次数', key: 'breakfastPost', style, width: 20 },
{ header: '早餐签到次数', key: 'breakfastSign', style, width: 20 },
{ header: '午餐报餐次数', key: 'lunchPost', style, width: 20 },
{ header: '午餐签到次数', key: 'lunchSign', style, width: 20 },
{ header: '晚餐报餐次数', key: 'dinnerPost', style, width: 20 },
{ header: '晚餐签到次数', key: 'dinnerSign', style, width: 20 },
{ header: '消费金额', key: 'expendMoney', style, width: 20 }
];
sheet.addRows(props.selection);
sheet.insertRow(1, [
`贵港资源${toDateString(
dateRange.value[0],
'yyyy-MM-dd'
)} 至 ${toDateString(dateRange.value[1], 'yyyy-MM-dd')}报餐人员统计`
]);
const a1 = sheet.getCell(1, 1);
a1.style = {
alignment: { horizontal: 'center' },
font: {
bold: true,
size: 20
}
};
sheet.mergeCells('A1:J1');
// sheet.getRow(2).fill = {
// type: 'pattern',
// pattern: 'solid',
// fgColor: { argb: '92d050' },
// bgColor: { argb: '92d050' }
// };
// 写入 buffer
const buffer = await workbook.xlsx.writeBuffer();
let blob = new Blob([buffer]);
var aEle = document.createElement('a'); // 创建a标签
aEle.download = exportTitle + '.xlsx'; // 设置下载文件的文件名
aEle.href = URL.createObjectURL(blob);
aEle.click(); // 设置点击事件
};
watch(
() => props.selection,
() => {}
);
// count();
</script>

266
src/views/baocan/export/index.vue Normal file
View File

@@ -0,0 +1,266 @@
<template>
<div class="page">
<div class="ele-body">
<a-card title="报餐人员统计" :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="userId"
:columns="columns"
:datasource="datasource"
:parse-data="parseData"
v-model:selection="selection"
tool-class="ele-toolbar-form"
:scroll="{ x: 1200 }"
class="sys-org-table"
:striped="true"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
:export-data="exportData"
@done="handleExport"
/>
</template>
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'lunchPost'">
<div v-if="index === 0">
<div>{{ record.lunchPost }}</div>
<div>{{ record.gear10 }}/{{ record.gear20 }}</div>
</div>
</template>
<template v-if="column.key === 'lunchSign'">
<div v-if="index === 0">
<div>{{ record.lunchSign }}</div>
<div>{{ record.signGear10 }}/{{ record.signGear20 }}</div>
</div>
</template>
<template v-if="column.key === 'createTime'">
{{ record.createTime }}
</template>
</template>
</ele-pro-table>
</a-card>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import Search from './components/search.vue';
import { listBcExport } from '@/api/apps/bc/export';
import type { BcExport, BcExportParam } from '@/api/apps/bc/export/model';
import ExcelJS from 'exceljs';
import { EleProTable, toDateString } from 'ele-admin-pro';
import {
ColumnItem,
DatasourceFunction
} from 'ele-admin-pro/es/ele-pro-table/types';
defineProps<{
activeKey?: boolean;
data?: any;
}>();
// 表格选中数据
const selection = ref<BcExport[]>([]);
const exportData = ref<BcExport[]>([]);
const exportTitle = ref<string>(`贵港资源报餐人员统计`);
/* 导出数据 */
const parseData = (data: BcExport[]) => {
exportData.value = data;
return data;
};
// 导出
const handleExport = async () => {
// 创建工作簿
const workbook = new ExcelJS.Workbook();
// 添加工作表
const sheet = workbook.addWorksheet(exportTitle.value, {
headerFooter: { firstHeader: 'Hello Exceljs' }
});
const style: ExcelJS.Style = {
alignment: { horizontal: 'center' }
};
sheet.columns = [
{ header: '部门', key: 'organizationName', style, width: 30 },
{ header: '编号', key: 'userId', style, width: 20 },
{ header: '姓名', key: 'nickname', style, width: 20 },
{ header: '早餐报餐次数', key: 'breakfastPost', style, width: 20 },
{ header: '早餐签到次数', key: 'breakfastSign', style, width: 20 },
{ header: '午餐报餐次数(食堂/领物)', key: 'lunchPostText', style, width: 20 },
{ header: '午餐签到次数(食堂/领物)', key: 'lunchSignText', style, width: 20 },
{ header: '晚餐报餐次数', key: 'dinnerPost', style, width: 20 },
{ header: '晚餐签到次数', key: 'dinnerSign', style, width: 20 },
{ header: '消费金额', key: 'expendMoney', style, width: 20 }
];
sheet.addRows(exportData.value);
sheet.insertRow(1, [exportTitle.value]);
const a1 = sheet.getCell(1, 1);
a1.style = {
alignment: { horizontal: 'center' },
font: {
bold: true,
size: 26
}
};
sheet.mergeCells('A1:J1');
// sheet.getRow(2).fill = {
// type: 'pattern',
// pattern: 'darkTrellis',
// fgColor: { argb: '92d050' },
// bgColor: { argb: '92d050' }
// };
// 写入 buffer
const buffer = await workbook.xlsx.writeBuffer();
let blob = new Blob([buffer]);
var aEle = document.createElement('a'); // 创建a标签
aEle.download = exportTitle.value + '.xlsx'; // 设置下载文件的文件名
aEle.href = URL.createObjectURL(blob);
aEle.click(); // 设置点击事件
};
// const reload = (where) => {
// title.value.deliveryTimeStart = where.deliveryTimeStart;
// title.value.deliveryTimeEnd = where.deliveryTimeEnd;
//
// listBcExport(where).then((data) => {
// exportData.value = data;
// });
// };
// reload({});
/* 搜索 */
const reload = (where?: BcExportParam) => {
exportTitle.value = `贵港资源${toDateString(
where?.deliveryTimeStart,
'yyyy-MM-dd'
)} 至 ${toDateString(where?.deliveryTimeEnd, 'yyyy-MM-dd')}报餐人员统计`;
selection.value = [];
tableRef?.value?.reload({ where: where });
};
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
// 搜索条件
if (filters.payStatus) {
where.payStatus = filters.payStatus;
}
if (filters.deliveryStatus) {
where.deliveryStatus = filters.deliveryStatus;
}
// 默认查询今天
// where.deliveryTime = toDateString(new Date(), 'YYYY-MM-dd 00:00:00');
return listBcExport({
...where,
...orders,
page,
limit
});
};
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
hideInTable: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '部门名称',
dataIndex: 'organizationName',
key: 'organizationName'
},
{
title: '编号',
dataIndex: 'userId',
key: 'userId'
},
{
title: '姓名',
dataIndex: 'nickname',
key: 'nickname'
},
{
title: '早餐报餐次数',
dataIndex: 'breakfastPost',
align: 'center'
},
{
title: '早餐签到次数',
dataIndex: 'breakfastSign',
align: 'center'
},
{
title: '午餐报餐次数(食堂/领物)',
dataIndex: 'lunchPost',
key: 'lunchPost',
align: 'center'
},
{
title: '午餐签到次数(食堂/领物)',
dataIndex: 'lunchSign',
key: 'lunchSign',
align: 'center'
},
{
title: '晚餐报餐次数',
dataIndex: 'dinnerPost',
align: 'center'
},
{
title: '晚餐签到次数',
dataIndex: 'dinnerSign',
align: 'center'
},
{
title: '消费金额',
dataIndex: 'expendMoney',
align: 'center'
}
]);
</script>
<script lang="ts">
export default {
name: 'BcExportIndex'
};
</script>
<style lang="less" scoped>
p {
line-height: 0.8;
}
.sys-org-table :deep(.ant-table-body) {
overflow: auto !important;
overflow: overlay !important;
}
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
padding: 0 4px;
margin-bottom: 0;
}
.price-edit {
padding-right: 5px;
}
.comments {
max-width: 200px;
}
</style>

391
src/views/baocan/food/components/order-info.vue Normal file
View File

@@ -0,0 +1,391 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="`80%`"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑订单' : '订单详情'"
:body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
@update:visible="updateVisible"
:maskClosable="false"
:footer="null"
@ok="save"
>
<!-- <a-card class="order-card" :bordered="false">-->
<!-- <a-steps-->
<!-- :current="active"-->
<!-- direction="horizontal"-->
<!-- :responsive="styleResponsive"-->
<!-- >-->
<!-- <template v-for="(item, index) in steps" :key="index">-->
<!-- <a-step-->
<!-- :title="item.title"-->
<!-- :description="timeAgo(item.description)"-->
<!-- />-->
<!-- </template>-->
<!-- </a-steps>-->
<!-- </a-card>-->
<a-card title="订单详情" class="order-card">
<!-- <a-space>-->
<!-- <a-button>发货</a-button>-->
<!-- <a-button>商家备注</a-button>-->
<!-- <a-button>打印小票</a-button>-->
<!-- </a-space>-->
<a-row :gutter="16">
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单号" name="orderId">
<span>{{ order.orderId }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="实付款金额" name="payPrice">
<span class="ele-text-warning"
>￥{{ formatNumber(order.payPrice) }}</span
>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单状态" name="orderStatus">
<a-tag>{{ order.payStatus === 20 ? '已下单' : '' }}</a-tag>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="买家信息" name="deliveryType">
<router-link :to="'/system/user/details?id=' + order.userId">
<span class="ele-text-primary">{{ order.nickname }}</span>
</router-link>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="预定日期" name="deliveryTime">
{{ toDateString(order.deliveryTime, 'yyyy-MM-dd') }}
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="下单时间" name="createTime">
{{ order.createTime }}
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="交易流水号" name="orderNo">
{{ order.orderNo }}
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="买家留言" name="buyerRemark">
<span>{{ order.buyerRemark }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单备注" name="comments">
<span>{{ order.comments }}</span>
</a-form-item>
</a-col>
</a-row>
</a-card>
<a-card title="菜品信息" class="order-card">
<a-spin :spinning="loading">
<a-table
:data-source="orderGoodsList"
:columns="columns"
:pagination="false"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'goodsName'">
<div class="goods-info">
<a-image
v-if="record.imageUrl"
:src="record.imageUrl"
:preview="false"
:width="50"
/>
<div class="info">
<div>{{ record.goodsName }}</div>
<div class="ele-text-placeholder">{{ record.comments }}</div>
</div>
</div>
</template>
</template>
</a-table>
</a-spin>
</a-card>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form } from 'ant-design-vue';
import { assignObject, toDateString } from 'ele-admin-pro';
import { useThemeStore } from '@/store/modules/theme';
import { formatNumber } from 'ele-admin-pro/es';
import { storeToRefs } from 'pinia';
import { Order } from '@/api/order/model';
import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
import { OrderGoods } from '@/api/order/goods/model';
import { getOrder } from '@/api/order';
import { listOrderGoods } from '@/api/order/goods';
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Order | null;
}>();
export interface step {
title?: String | undefined;
subTitle?: String | undefined;
description?: String | undefined;
}
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
const orderGoodsList = ref<OrderGoods[]>([]);
// 步骤条
const steps = ref<step[]>([
{
title: '报餐',
description: undefined
},
{
title: '付款',
description: undefined
},
{
title: '发餐',
description: undefined
},
{
title: '取餐',
description: undefined
},
{
title: '完成',
description: undefined
}
]);
const active = ref(2);
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 订单信息
const order = reactive<Order>({
orderId: undefined,
orderNo: '',
userId: undefined,
orderSourceData: '',
nickname: '',
comments: '',
createTime: undefined,
deliveryTime: '',
payPrice: undefined,
payStatus: undefined
});
// 请求状态
const loading = ref(true);
const { resetFields } = useForm(order);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
const columns = ref<ColumnItem[]>([
// {
// title: '菜品ID',
// dataIndex: 'goodsId'
// },
{
title: '菜品信息',
dataIndex: 'goodsName',
key: 'goodsName'
},
{
title: '菜品价格',
dataIndex: 'goodsPrice',
customRender: ({ text }) => '￥' + text
},
{
title: '购买数量',
dataIndex: 'totalNum',
key: 'totalNum'
}
]);
/* 制作步骤条 */
const loadSteps = (order) => {
steps.value = [];
steps.value.push({
title: '下单'
});
steps.value.push({
title: '付款'
});
steps.value.push({
title: '发货'
});
steps.value.push({
title: '收货'
});
steps.value.push({
title: '完成'
});
// 下单
if (order.payStatus == 10) {
active.value = 0;
steps.value[0].description = order.createTime;
}
// 付款
if (order.payStatus == 20) {
active.value = 1;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
}
// 发货
if (order.payStatus == 20 && order.deliveryStatus == 20) {
active.value = 2;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
}
// 收货
if (order.payStatus == 20 && order.receiptStatus == 20) {
active.value = 3;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
steps.value[3].description = order.receiptTime;
}
// 完成
if (order.payStatus == 20 && order.orderStatus == 30) {
active.value = 4;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
steps.value[3].description = order.receiptTime;
}
// 已取消
if (order.orderStatus == 20) {
active.value = 4;
}
};
const queryOrder = () => {
var orderId = props.data?.orderId;
getOrder(orderId).then((res) => {
assignObject(order, res);
});
};
const getOrderGoods = () => {
const orderId = props.data?.orderId;
listOrderGoods({ orderId }).then((data) => {
orderGoodsList.value = data;
});
};
/* 保存编辑 */
const save = () => {};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
queryOrder();
// assignObject(order, props.data);
loadSteps(props.data);
getOrderGoods();
}
} else {
resetFields();
}
}
);
</script>
<style lang="less" scoped>
.order-card {
margin-bottom: 20px;
}
.ant-form-item {
margin-bottom: 5px;
}
.goods-info {
display: flex;
.info {
padding-left: 5px;
display: flex;
flex-direction: column;
}
}
</style>

313
src/views/baocan/food/components/search.vue Normal file
View File

@@ -0,0 +1,313 @@
<!-- 搜索表单 -->
<template>
<div class="search">
<a-space :size="10" style="flex-wrap: wrap">
<!-- <a-button type="primary" class="ele-btn-icon" @click="add">-->
<!-- <template #icon>-->
<!-- <PlusOutlined />-->
<!-- </template>-->
<!-- <span>发布菜品</span>-->
<!-- </a-button>-->
<!-- <a-button-->
<!-- danger-->
<!-- type="primary"-->
<!-- class="ele-btn-icon"-->
<!-- :disabled="selection.length === 0"-->
<!-- @click="removeBatch"-->
<!-- >-->
<!-- <template #icon>-->
<!-- <DeleteOutlined />-->
<!-- </template>-->
<!-- <span>批量删除</span>-->
<!-- </a-button>-->
<SelectOrganization
:placeholder="`请选择部门`"
v-model:value="where.organizationName"
@done="chooseOrganization"
/>
<a-date-picker
placeholder="按天筛选"
value-format="YYYY-MM-DD"
v-model:value="where.deliveryTime"
@change="search"
/>
<a-range-picker
v-model:value="dateRange"
@change="search"
value-format="YYYY-MM-DD"
class="ele-fluid"
/>
<a-select
v-model:value="where.week"
style="width: 120px"
placeholder="请选择星期"
allow-clear
@change="handleWeek"
>
<a-select-option :value="1">星期一</a-select-option>
<a-select-option :value="2">星期二</a-select-option>
<a-select-option :value="3">星期三</a-select-option>
<a-select-option :value="4">星期四</a-select-option>
<a-select-option :value="5">星期五</a-select-option>
<a-select-option :value="6">星期六</a-select-option>
<a-select-option :value="0">星期日</a-select-option>
</a-select>
<a-radio-group v-model:value="where.categoryId" @change="search">
<a-radio-button :value="25">早餐</a-radio-button>
<a-radio-button :value="26">午餐</a-radio-button>
<a-radio-button :value="27">晚餐</a-radio-button>
</a-radio-group>
<a-radio-group v-model:value="where.deliveryStatus" @change="search">
<a-radio-button :value="20">已签到</a-radio-button>
<a-radio-button :value="10">未签到</a-radio-button>
</a-radio-group>
<a-radio-group v-model:value="where.gear" @change="search">
<a-radio-button :value="10">食堂档口</a-radio-button>
<a-radio-button :value="20">物品档口</a-radio-button>
</a-radio-group>
<!-- <a-button @click="onRepairData">修复数据</a-button>-->
<!-- <a-button type="primary" class="ele-btn-icon" @click="handleExport">-->
<!-- <template #icon>-->
<!-- <download-outlined />-->
<!-- </template>-->
<!-- <span>导出</span>-->
<!-- </a-button>-->
<a-input-search
allow-clear
placeholder="请输入订单号|姓名"
v-model:value="where.keywords"
@pressEnter="search"
@search="search"
style="width: 196px"
/>
<a-button @click="reset">重置</a-button>
<!-- <span style="margin-left: 20px"-->
<!-- >已签到 {{ signUsers }} / 已报餐 {{ postUsers }}</span-->
<!-- >-->
</a-space>
<a-spin :spinning="loading">
<a-alert
:message="`报餐统计：已报餐 ${post} / 已签到 ${sign} / 未签到 ${noSign}`"
type="info"
style="margin-top: 8px; max-width: 602px"
/>
</a-spin>
</div>
</template>
<script lang="ts" setup>
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import { ref, watch } from 'vue';
import { OrderGoods, OrderGoodsParam } from '@/api/order/goods/model';
import { countOrderGoods } from '@/api/apps/statistics';
import { message } from 'ant-design-vue';
import { Organization } from '@/api/system/organization/model';
import { utils, writeFile } from 'xlsx';
// import { Dayjs } from 'dayjs';
// import { message } from 'ant-design-vue';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: OrderGoodsParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'advanced'): void;
}>();
// 表单数据
const { where, resetFields } = useSearch<OrderGoodsParam>({
categoryId: undefined,
deliveryTime: undefined,
deliveryStatus: undefined,
deliveryTimeStart: undefined,
deliveryTimeEnd: undefined,
gear: undefined,
week: undefined,
organizationId: undefined,
keywords: undefined
});
// 下来选项
// const categoryId = ref<number>(0);
const post = ref<number>(0);
const sign = ref<number>(0);
const noSign = ref<number>(0);
// 请求状态
const loading = ref(true);
// const deliveryStatus = ref<number>(0);
// const gear = ref<number>(0);
// 预定日期
// const deliveryTime = ref<Dayjs>();
// 日期范围选择
const dateRange = ref<[string, string]>(['', '']);
/* 搜索 */
const search = () => {
const [d1, d2] = dateRange.value ?? [];
where.deliveryTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
where.deliveryTimeEnd = d2 ? d2 + ' 00:00:00' : undefined;
emit('search', {
...where
});
count();
};
const handleWeek = (index) => {
where.week = index;
search();
};
// const handleTabs = (e) => {
// const index = Number(e.target.value);
// resetFields();
// categoryId.value = index;
// search();
// };
//
// const onDeliveryStatus = (e) => {
// const index = Number(e.target.value);
// resetFields();
// deliveryStatus.value = index;
// search();
// };
// const onGear = (e) => {
// const index = Number(e.target.value);
// resetFields();
// gear.value = index;
// search();
// };
//
// // 发布菜品
// const add = () => {
// emit('add');
// };
const chooseOrganization = (e: Organization) => {
where.organizationName = e.organizationName;
where.organizationId = e.organizationId;
search();
};
/* 重置 */
const reset = () => {
resetFields();
post.value = 0;
sign.value = 0;
noSign.value = 0;
search();
};
const count = () => {
if (
where.categoryId == undefined &&
where.deliveryTime == undefined &&
where.deliveryTimeStart == undefined
) {
console.log('sss>>>');
loading.value = false;
return false;
}
loading.value = true;
countOrderGoods(where)
.then((data) => {
console.log('data>>>', data);
if (data) {
post.value = data.post;
sign.value = data.sign;
noSign.value = data.noSign;
} else {
post.value = 0;
sign.value = 0;
noSign.value = 0;
}
loading.value = false;
})
.catch((err) => {
message.error(err.message);
loading.value = false;
});
};
// 导出
const handleExport = () => {
if (!props.selection?.length) {
message.error('请至少选择一条数据');
return;
}
const array: (string | number)[][] = [
[
'部门',
'编号',
'姓名',
'早餐报餐次数',
'早餐签到次数',
'午餐报餐次数',
'午餐签到次数',
'晚餐报餐次数',
'晚餐签到次数',
'消费金额'
]
];
props.selection?.forEach((d: OrderGoods) => {
array.push([
`${d.organizationName}`,
`${d.userId}`,
`${d.nickname}`,
`${d.breakfastPostUsers}`,
`${d.breakfastSignUsers}`,
`${d.lunchPostUsers}`,
`${d.lunchSignUsers}`,
`${d.dinnerPostUsers}`,
`${d.dinnerSignUsers}`
]);
});
const sheetName = '报餐统计导出';
const workbook = {
SheetNames: [sheetName],
Sheets: {}
};
const sheet = utils.aoa_to_sheet(array);
workbook.Sheets[sheetName] = sheet;
// 设置列宽
sheet['!cols'] = [
{ wch: 10 },
{ wch: 10 },
{ wch: 10 },
{ wch: 10 },
{ wch: 20 },
{ wch: 40 },
{ wch: 10 }
];
writeFile(workbook, '报餐统计导出.xlsx');
};
// const onRepairData = () => {
// where.deliveryTime = deliveryTime.value
// ? deliveryTime.value + ' 00:00:00'
// : '';
// // where.payStatus = 10;
// repairData({}).then(() => {
// // message.success(res.message);
// });
// };
// 批量删除
// const removeBatch = () => {
// emit('remove');
// };
watch(
() => props.selection,
() => {}
);
count();
</script>

350
src/views/baocan/food/index.vue Normal file
View File

@@ -0,0 +1,350 @@
<template>
<div class="page">
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="orderGoodsId"
:columns="columns"
:datasource="datasource"
v-model:selection="selection"
:customRow="customRow"
tool-class="ele-toolbar-form"
:scroll="{ x: 1200 }"
class="sys-org-table"
:striped="true"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<!-- <template v-if="column.key === 'imageUrl'">-->
<!-- <img :src="record.imageUrl" width="100" height="70" />-->
<!-- </template>-->
<template v-if="column.key === 'categoryId'">
{{ record.categoryId === 25 ? '早餐' : '' }}
{{ record.categoryId === 26 ? '午餐' : '' }}
{{ record.categoryId === 27 ? '晚餐' : '' }}
</template>
<template v-if="column.key === 'nickname'">
{{ record.nickname }}
</template>
<template v-if="column.key === 'deliveryTime'">
{{ toDateString(record.deliveryTime, 'MM-dd') }}
{{ getWeek(record.week) }}
</template>
<template v-if="column.key === 'deliveryStatus'">
<a-tag
v-if="record.deliveryStatus === 10"
color="orange"
@click="onDeliveryStatus(record, 20)"
>未签到</a-tag
>
<a-tag
v-if="record.deliveryStatus === 20"
color="green"
@click="onDeliveryStatus(record, 10)"
>已签到</a-tag
>
</template>
<template v-if="column.key === 'createTime'">
{{ record.createTime }}
</template>
<template v-if="column.key === 'action'">
<a-space>
<a-button @click="openInfo(record)">详情</a-button>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
</div>
<!-- 订单详情 -->
<order-info v-model:visible="showInfo" :data="current" @done="reload" />
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import OrderInfo from './components/order-info.vue';
import { getWeek } from '@/utils/common';
import {
pageOrderGoods,
removeBatchOrderGoods,
updateOrderGoods
} from '@/api/order/goods';
import type { OrderGoods, OrderGoodsParam } from '@/api/order/goods/model';
import useFormData from '@/utils/use-form-data';
defineProps<{
activeKey?: boolean;
data?: any;
}>();
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
// {
// key: 'index',
// width: 48,
// align: 'center',
// fixed: 'left',
// hideInSetting: true,
// hideInTable: true,
// customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
// },
// {
// title: '操作',
// key: 'action',
// width: 120,
// align: 'center',
// fixed: 'left',
// hideInSetting: true
// },
// {
// title: '菜品封面图',
// dataIndex: 'imageUrl',
// key: 'imageUrl',
// align: 'center'
// },
{
title: '订单号',
dataIndex: 'orderId',
key: 'orderId',
align: 'center'
},
{
title: '预定日期',
dataIndex: 'deliveryTime',
key: 'deliveryTime',
align: 'center'
},
{
title: '姓名',
dataIndex: 'nickname',
align: 'center'
},
{
title: '菜品名称',
dataIndex: 'goodsName',
key: 'goodsName',
align: 'center'
},
{
title: '餐段',
dataIndex: 'categoryId',
key: 'categoryId',
align: 'center'
},
{
title: '数量',
dataIndex: 'totalNum',
align: 'center',
sorter: true
},
// {
// title: '付款状态',
// dataIndex: 'payStatus',
// align: 'center',
// sorter: true,
// customRender: ({ text }) => {
// if (text == 10) {
// return '未付款';
// }
// if (text == 20) {
// return '已支付';
// }
// }
// },
// {
// title: '订单状态',
// dataIndex: 'orderStatus',
// align: 'center',
// sorter: true,
// customRender: ({ text }) => {
// if (text == 10) {
// return '进行中';
// }
// if (text == 20) {
// return '已取消';
// }
// if (text == 30) {
// return '已完成';
// }
// }
// },
{
title: '签到状态',
dataIndex: 'deliveryStatus',
key: 'deliveryStatus',
align: 'center'
},
{
title: '报餐时间',
dataIndex: 'createTime',
key: 'createTime',
align: 'center',
sorter: true,
customRender: ({ text }) => toDateString(text)
}
]);
// 表格选中数据
const selection = ref<OrderGoods[]>([]);
// 当前编辑数据
const current = ref<OrderGoods | null>(null);
// 是否显示资产详情
const showInfo = ref(false);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
// 搜索条件
if (filters.payStatus) {
where.payStatus = filters.payStatus;
}
if (filters.deliveryStatus) {
where.deliveryStatus = filters.deliveryStatus;
}
where.payStatus = 20;
where.hasNum = false;
where.orderStatus = 10;
where.tenantId = localStorage.getItem('tenantId');
return pageOrderGoods({
...where,
...orders,
page,
limit
});
};
// 表单数据
const { form } = useFormData<OrderGoods>({
orderGoodsId: undefined,
deliveryStatus: undefined
});
/* 搜索 */
const reload = (where?: OrderGoodsParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openInfo = (row?: OrderGoods) => {
current.value = row ?? null;
showInfo.value = true;
};
const onDeliveryStatus = (row?: OrderGoods, deliveryStatus?: number) => {
Modal.confirm({
title: '提示',
content: '确定要修改签到状态吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
form.orderGoodsId = row?.orderGoodsId;
form.deliveryStatus = deliveryStatus;
updateOrderGoods(form).then((msg) => {
message.success(msg);
reload();
});
}
});
};
/* 批量删除 */
const removeBatch = () => {
console.log(selection.value);
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchOrderGoods(selection.value.map((d) => d.orderGoodsId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 自定义行属性 */
const customRow = (record: OrderGoods) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
// openEdit(record);
}
};
};
reload();
</script>
<script lang="ts">
export default {
name: 'OrderGoodsIndex'
};
</script>
<style lang="less" scoped>
p {
line-height: 0.8;
}
.sys-org-table :deep(.ant-table-body) {
overflow: auto !important;
overflow: overlay !important;
}
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
padding: 0 4px;
margin-bottom: 0;
}
.price-edit {
padding-right: 5px;
}
.comments {
max-width: 200px;
}
</style>

39
src/views/baocan/goods/components/category-select.vue Normal file
View File

@@ -0,0 +1,39 @@
<!-- 目录选择下拉框 -->
<template>
<a-tree-select
allow-clear
tree-default-expand-all
:placeholder="placeholder"
:value="value || undefined"
:tree-data="data"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
@update:value="updateValue"
/>
</template>
<script lang="ts" setup>
import type { Goods } from '@/api/goods/model';
const emit = defineEmits<{
(e: 'update:value', value?: number): void;
}>();
withDefaults(
defineProps<{
// 选中的数据(v-modal)
value?: number;
// 提示信息
placeholder?: string;
// 文章分类
data: Goods[];
}>(),
{
placeholder: '请选择上级分类'
}
);
/* 更新选中数据 */
const updateValue = (value?: number) => {
emit('update:value', value);
};
</script>

536
src/views/baocan/goods/components/goods-edit.vue Normal file
View File

@@ -0,0 +1,536 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="650"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑菜品' : '添加菜品'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
:maskClosable="false"
@ok="save"
>
<a-tabs v-model:activeKey="activeKey" type="card">
<a-tab-pane key="1" tab="基本信息">
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="{ md: { span: 12 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
>
<a-form-item label="菜品名称" name="goodsName">
<a-input
allow-clear
placeholder="请输入菜品名称"
v-model:value="form.goodsName"
/>
</a-form-item>
<a-form-item label="菜品类别" name="categoryId">
<category-select
:data="categoryList"
placeholder="请选择菜品类别"
v-model:value="form.categoryId"
/>
</a-form-item>
<a-row :gutter="16">
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="所属档口" name="gear">
<a-radio-group v-model:value="form.gear">
<a-radio :value="10">食堂档口</a-radio>
<a-radio :value="20">物品档口</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
label="菜品价格"
name="goodsPriceMin"
v-if="form.specType === 0"
>
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.goodsPriceMin"
/>
<span class="ml-10">元</span>
</a-form-item>
</a-col>
<a-col :md="12" :sm="24" :xs="24">
<a-form-item
label="内部员工临时报餐价"
name="linePrice"
v-if="form.specType === 0"
>
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.linePriceMin"
/>
<span class="ml-10">元</span>
</a-form-item>
<a-form-item
label="外部人员价格"
name="linePriceMax"
v-if="form.specType === 0"
>
<a-input-number
:min="0"
:precision="2"
style="width: 200px"
v-model:value="form.linePriceMax"
/>
<span class="ml-10">元</span>
</a-form-item>
</a-col>
</a-row>
<a-form-item label="菜品图片" name="images">
<ele-image-upload
v-model:value="images"
:limit="14"
:drag="true"
:multiple="true"
:upload-handler="uploadHandler"
@upload="onUpload"
/>
</a-form-item>
<a-form-item label="备注" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入备注"
v-model:value="form.comments"
/>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="2" tab="其他信息">
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
>
<a-form-item label="是否开启限购" name="purchaseLimit">
<a-radio-group v-model:value="form.purchaseLimit">
<a-radio :value="0">否</a-radio>
<a-radio :value="1">是</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="状态" name="status">
<a-radio-group v-model:value="form.status">
<a-radio :value="0">上架</a-radio>
<a-radio :value="1">下架</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="排序" name="sortNumber">
<a-input-number
:min="0"
:max="99999"
class="ele-fluid"
placeholder="请输入排序号（数字越小越靠前）"
v-model:value="form.sortNumber"
/>
</a-form-item>
</a-form>
</a-tab-pane>
</a-tabs>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { Goods } from '@/api/goods/model';
import { addGoods, updateGoods } from '@/api/goods';
import { FormInstance, Rule, RuleObject } from 'ant-design-vue/es/form';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { uploadFile } from '@/api/system/file';
import { FILE_SERVER, FILE_THUMBNAIL } from "@/config/setting";
import useFormData from '@/utils/use-form-data';
import CategorySelect from './category-select.vue';
import TinymceEditor from '@/components/TinymceEditor/index.vue';
import { Category } from '@/api/goods/category/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { createCode } from '@/utils/common';
// import MultiSpec from './MultiSpec.vue';
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
// const disabled = ref(false);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Goods | null;
categoryList?: Category[];
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 是否开启响应式布局
// const themeStore = useThemeStore();
// const { styleResponsive } = storeToRefs(themeStore);
// 提交状态
const loading = ref(false);
// 已上传数据
const images = ref<ItemType[]>([]);
const formRef = ref<FormInstance | null>(null);
// 选项卡位置
const activeKey = ref('1');
// 编辑器内容，双向绑定
const content = ref<any>('');
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<Goods>({
goodsType: 1,
goodsName: '',
goodsCode: `G${createCode()}`,
categoryId: 0,
image: '',
files: '',
goodsPriceMin: 0,
linePriceMin: 0,
linePriceMax: 0,
createTime: '',
comments: '',
sortNumber: 100,
status: 0,
goodsId: 0,
specType: 0,
deliveryType: 0,
period: undefined,
gear: 10,
content: '',
deliveryId: 0,
sellingPoint: '',
purchaseLimit: 1,
deductStockType: 10,
salesActual: 180,
goodsWeight: 0,
stockTotal: 2000
});
/* 上传事件 */
const uploadHandler = (file: File) => {
const item: ItemType = {
file,
uid: (file as any).uid,
name: file.name
};
if (!file.type.startsWith('image')) {
message.error('只能选择图片');
return;
}
if (file.size / 1024 / 1024 > 2) {
message.error('大小不能超过 2MB');
return;
}
onUpload(item);
};
// 上传文件
const onUpload = (item) => {
const { file } = item;
uploadFile(file)
.then((data) => {
images.value.push({
uid: data.id,
url: FILE_THUMBNAIL + data.path,
status: 'done'
});
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
goodsName: [
{
required: true,
message: '请输入菜品名称',
type: 'string',
trigger: 'blur'
}
],
categoryId: [
{
required: true,
type: 'number',
message: '请选择菜品分类',
trigger: 'blur'
}
],
goodsCode: [
{
required: true,
type: 'string',
message: '请填写菜品编号',
trigger: 'blur'
}
],
gear: [
{
required: true,
type: 'number',
message: '请选择所属档口',
trigger: 'blur'
}
],
deliveryType: [
{
required: true,
type: 'number',
message: '请选择配送方式',
trigger: 'blur'
}
],
goodsPriceMin: [
{
required: true,
type: 'number',
message: '请输入菜品价格',
trigger: 'blur'
}
],
stockTotal: [
{
required: true,
type: 'number',
message: '请输入菜品库存',
trigger: 'blur'
}
],
specType: [
{
required: true,
type: 'number',
message: '请选择规格类型',
trigger: 'blur'
}
],
deliveryId: [
{
required: true,
type: 'number',
message: '请选择运费模板',
trigger: 'blur'
}
],
status: [
{
required: true,
type: 'number',
message: '请选择菜品状态',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
type: 'number',
message: '请输入排序号',
trigger: 'blur'
}
],
deductStockType: [
{
required: true,
type: 'number',
message: '请设置库存计算方式',
trigger: 'blur'
}
],
purchaseLimit: [
{
required: true,
type: 'number',
message: '请设置是否限购',
trigger: 'blur'
}
],
images: [
{
required: true,
type: 'string',
message: '请选择菜品图片',
trigger: 'blur',
validator: async (_rule: RuleObject, value: string) => {
if (images.value.length == 0) {
return Promise.reject('请上传菜品图片');
}
return Promise.resolve();
}
}
],
customerId: [
{
required: true,
type: 'number',
message: '请选择客户'
}
],
linePriceMin: [
{
required: true,
type: 'number',
message: '请输入菜品划线价',
trigger: 'blur'
}
],
content: [
{
required: true,
type: 'string',
message: '请输入文章内容',
trigger: 'blur',
validator: async (_rule: RuleObject, value: string) => {
if (content.value == '') {
return Promise.reject('请输入文字内容');
}
return Promise.resolve();
}
}
],
brand: [
{
required: true,
type: 'string',
message: '请选项菜品厂商',
trigger: 'blur'
}
]
});
// const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
// const config = ref({
// height: 500,
// // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
// file_picker_callback: (callback: any, _value: any, meta: any) => {
// const input = document.createElement('input');
// input.setAttribute('type', 'file');
// // 设定文件可选类型
// if (meta.filetype === 'image') {
// input.setAttribute('accept', 'image/*');
// } else if (meta.filetype === 'media') {
// input.setAttribute('accept', 'video/*');
// }
// input.onchange = () => {
// const file = input.files?.[0];
// if (!file) {
// return;
// }
// if (meta.filetype === 'media') {
// if (!file.type.startsWith('video/')) {
// editorRef.value?.alert({ content: '只能选择视频文件' });
// return;
// }
// }
// if (file.size / 1024 / 1024 > 20) {
// editorRef.value?.alert({ content: '大小不能超过 20MB' });
// return;
// }
// const reader = new FileReader();
// reader.onload = (e) => {
// if (e.target?.result != null) {
// const blob = new Blob([e.target.result], { type: file.type });
// callback(URL.createObjectURL(blob));
// }
// };
// reader.readAsArrayBuffer(file);
// };
// input.click();
// }
// });
// const onSelect = (item) => {
// form.goodsId = item.goodsId;
// };
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
// 获取第一张图片作为封面图
images.value.map((d, i) => {
if (i === 0) {
form.image = d.url;
}
});
const goodsForm = {
...form,
files: JSON.stringify(images.value),
content: content.value
};
const saveOrUpdate = isUpdate.value ? updateGoods : addGoods;
saveOrUpdate(goodsForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data,
files: JSON.parse(String(props.data.files))
});
images.value = JSON.parse(String(props.data.files));
content.value = props.data.content;
isUpdate.value = true;
} else {
isUpdate.value = false;
content.value = '';
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

65
src/views/baocan/goods/components/goods-search.vue Normal file
View File

@@ -0,0 +1,65 @@
<!-- 搜索表单 -->
<template>
<a-form
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="服务器名称">
<a-input
v-model:value.trim="where.name"
placeholder="请输入服务器名称"
allow-clear
@pressEnter="search"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="IP地址">
<a-input
v-model:value.trim="where.code"
placeholder="请输入服务器IP"
allow-clear
@pressEnter="search"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="search">查询</a-button>
<a-button @click="reset">重置</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
<script lang="ts" setup>
import useSearch from '@/utils/use-search';
import type { AssetsParam } from '@/api/oa/assets/model';
const emit = defineEmits<{
(e: 'search', where?: AssetsParam): void;
}>();
// 表单数据
const { where, resetFields } = useSearch<AssetsParam>({
name: '',
code: '',
isExpire: ''
});
/* 搜索 */
const search = () => {
emit('search', where);
};
/* 重置 */
const reset = () => {
resetFields();
search();
};
</script>

131
src/views/baocan/goods/components/search.vue Normal file
View File

@@ -0,0 +1,131 @@
<!-- 搜索表单 -->
<template>
<a-space>
<a-button
type="primary"
class="ele-btn-icon"
v-permission="'shop:goods:save'"
@click="add"
>
<template #icon>
<PlusOutlined />
</template>
<span>新建</span>
</a-button>
<a-button
danger
type="primary"
class="ele-btn-icon"
:v-role="`dev`"
@click="removeBatch"
v-if="props.selection.length > 0"
>
<template #icon>
<DeleteOutlined />
</template>
<span>批量删除</span>
</a-button>
<a-radio-group v-model:value="listType" @change="handleTabs">
<a-radio-button value="all">全部</a-radio-button>
<a-radio-button value="onSale">出售中</a-radio-button>
<a-radio-button value="offSale">已下架</a-radio-button>
</a-radio-group>
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入搜索关键词"
@search="search"
@pressEnter="search"
>
<template #addonBefore>
<a-select v-model:value="type" style="width: 120px; margin: -5px -12px">
<a-select-option value="goodsName">菜品名称</a-select-option>
</a-select>
</template>
</a-input-search>
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { GoodsParam } from '@/api/goods/model';
import { ref, watch } from 'vue';
const emit = defineEmits<{
(e: 'search', where?: GoodsParam): void;
(e: 'add'): void;
(e: 'remove'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where, resetFields } = useSearch<GoodsParam>({
goodsId: undefined,
goodsName: '',
goodsCode: ''
});
// 下来选项
const type = ref('goodsName');
// tabType
const listType = ref('all');
// 搜索内容
const searchText = ref('');
/* 搜索 */
const search = () => {
if (type.value == 'goodsName') {
where.goodsName = searchText.value;
where.goodsCode = undefined;
}
if (type.value == 'goodsCode') {
where.goodsCode = searchText.value;
where.goodsName = undefined;
}
emit('search', where);
};
const handleTabs = (e) => {
listType.value = e.target.value;
if (listType.value == 'all') {
resetFields();
}
if (listType.value == 'onSale') {
where.status = 0;
}
if (listType.value == 'offSale') {
where.status = 1;
}
if (listType.value == 'soldOut') {
where.stockTotal = 0;
}
emit('search', where);
};
// 新增
const add = () => {
emit('add');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
/* 重置 */
// const reset = () => {
// resetFields();
// search();
// };
// 监听字典id变化
watch(
() => props.selection,
() => {}
);
</script>

344
src/views/baocan/goods/index.vue Normal file
View File

@@ -0,0 +1,344 @@
<template>
<div class="page">
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="goodsId"
:columns="columns"
:height="tableHeight"
:datasource="datasource"
v-model:selection="selection"
:customRow="customRow"
>
<template #toolbar>
<search
:selection="selection"
@search="reload"
@add="openEdit"
@remove="removeBatch"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :preview="false" :width="80" />
</template>
<template v-if="column.key === 'goodsName'">
<a-tooltip :title="record.goodsName">
<div class="ele-text-heading">
<b>{{ record.goodsName }}</b>
</div>
<div class="ele-text-placeholder">
{{ record.comments }}
</div>
</a-tooltip>
</template>
<template v-if="column.key === 'gear'">
<a-tag v-if="record.gear === 10" color="red">食堂档口</a-tag>
<a-tag v-if="record.gear === 20">物品档口</a-tag>
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">上架</a-tag>
<a-tag v-if="record.status === 1" color="orange">下架</a-tag>
</template>
<!-- <template v-if="column.key === 'comments'">-->
<!-- <a-tooltip :title="record.comments" placement="topLeft">-->
<!-- {{ record.comments }}-->
<!-- </a-tooltip>-->
<!-- </template>-->
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<goods-edit
v-model:visible="showEdit"
:data="current"
:category-list="data"
@done="reload"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { timeAgo, toTreeData } from 'ele-admin-pro';
import { createVNode, computed, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import GoodsEdit from './components/goods-edit.vue';
import { pageGoods, removeGoods, removeBatchGoods } from '@/api/goods';
import type { Goods, GoodsParam } from '@/api/goods/model';
import { listCategory } from '@/api/goods/category';
import { Category } from '@/api/goods/category/model';
import { FILE_THUMBNAIL } from '@/config/setting';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 加载状态
const loading = ref(true);
// 树展开的key
const expandedRowKeys = ref<number[]>([]);
// 树选中的key
const selectedRowKeys = ref<number[]>([]);
// 当前用户信息
// const brand = getDictionaryOptions('serverBrand');
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '菜品图片',
dataIndex: 'image',
width: 110,
key: 'image'
},
{
title: '菜品名称',
dataIndex: 'goodsName',
key: 'goodsName',
width: 320,
ellipsis: true
},
{
title: '所属档口',
dataIndex: 'gear',
key: 'gear'
},
{
title: '类别',
dataIndex: 'categoryName'
},
{
title: '菜品价格',
dataIndex: 'goodsPriceMin',
key: 'goodsPriceMin',
customRender: ({ text }) => '￥' + text
},
{
title: '备注',
dataIndex: 'comments',
key: 'comments',
hideInTable: true,
ellipsis: true
},
{
title: '状态',
dataIndex: 'status',
sorter: true,
key: 'status',
showSorterTooltip: false,
customRender: ({ text }) => ['上架', '下架'][text]
},
{
title: '排序',
dataIndex: 'sortNumber',
sorter: true
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
sorter: true,
ellipsis: true,
hideInTable: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center',
hideInSetting: true
}
]);
// 表格选中数据
const selection = ref<Goods[]>([]);
// 当前编辑数据
const current = ref<Goods | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 树形数据
const data = ref<Category[]>([]);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.brand = filters.brand;
}
return pageGoods({ ...where, ...orders, page, limit });
};
/* 查询 */
const query = () => {
loading.value = true;
listCategory()
.then((list) => {
loading.value = false;
const eks: number[] = [];
list.forEach((d) => {
d.key = d.categoryId;
d.value = d.categoryId;
if (typeof d.categoryId === 'number') {
eks.push(d.categoryId);
}
});
expandedRowKeys.value = eks;
data.value = toTreeData({
data: list,
idField: 'categoryId',
parentIdField: 'parentId'
});
if (list.length) {
if (typeof list[0].categoryId === 'number') {
selectedRowKeys.value = [list[0].categoryId];
}
current.value = list[0];
} else {
selectedRowKeys.value = [];
current.value = null;
}
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
};
/* 搜索 */
const reload = (where?: GoodsParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
// 搜索是否展开
const searchExpand = ref(false);
// 表格固定高度
const fixedHeight = ref(false);
// 表格高度
const tableHeight = computed(() => {
return fixedHeight.value
? searchExpand.value
? 'calc(100vh - 618px)'
: 'calc(100vh - 562px)'
: void 0;
});
/* 打开编辑弹窗 */
const openEdit = (row?: Goods) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 删除单个 */
const remove = (row: Goods) => {
const hide = message.loading('请求中..', 0);
removeGoods(row.goodsId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchGoods(selection.value.map((d) => d.goodsId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 自定义行属性 */
const customRow = (record: Goods) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
query();
</script>
<script lang="ts">
export default {
name: 'GoodsIndex'
};
</script>
<style lang="less" scoped>
// 文字超出隐藏(两行)
// 需要设置文字容器的宽度
.twoline-hide {
width: 320px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
</style>

215
src/views/baocan/notice/components/bc-equipment-edit.vue Normal file
View File

@@ -0,0 +1,215 @@
<!-- 用户编辑弹窗 -->
<template>
<a-drawer
:width="880"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '编辑设备' : '添加设备'"
:body-style="{ paddingBottom: '8px' }"
:footer-style="{ textAlign: 'right' }"
@update:visible="updateVisible"
:maskClosable="isUpdate"
@ok="save"
>
<a-form
ref="formRef"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
:model="form"
:rules="rules"
>
<a-form-item label="设备编码" name="equipmentCode">
<a-input
allow-clear
placeholder="请输入设备编码"
:disabled="isUpdate"
v-model:value="form.equipmentCode"
/>
</a-form-item>
<a-form-item label="所属档口" name="gear">
<a-radio-group v-model:value="form.gear">
<a-radio :value="10">食堂档口</a-radio>
<a-radio :value="20">物品档口</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="设备描述" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入描述内容"
v-model:value="form.comments"
/>
</a-form-item>
<!-- <a-form-item label="启用状态" name="status">-->
<!-- <a-switch :checked="form.status === 0" @change="editStatus" />-->
<!-- </a-form-item>-->
</a-form>
<template #footer>
<a-space>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" @click="save">保存</a-button>
</a-space>
</template>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { BcEquipment } from '@/api/apps/bc/equipment/model';
import { addBcEquipment, updateBcEquipment } from '@/api/apps/bc/equipment';
import { FormInstance, Rule } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: BcEquipment | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 是否是修改
const isUpdate = ref(false);
// 提交状态
const loading = ref(false);
const formRef = ref<FormInstance | null>(null);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<BcEquipment>({
bcEquipmentId: undefined,
equipmentName: undefined,
equipmentCode: '',
gear: 10,
createTime: '',
comments: '',
sortNumber: 100,
status: 0
});
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
equipmentName: [
{
required: true,
message: '请输入设备名称',
type: 'string',
trigger: 'blur'
}
],
equipmentCode: [
{
required: true,
type: 'string',
message: '请填写设备编号',
trigger: 'blur'
}
],
status: [
{
required: true,
type: 'number',
message: '请选择设备状态',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
type: 'number',
message: '请输入排序号',
trigger: 'blur'
}
]
});
/* 控制放店开关 */
const editStatus = () => {
if (form.status == 0) {
form.status = 1;
} else {
form.status = 0;
}
updateBcEquipment(form)
.then(() => {
message.success('操作成功');
})
.catch((e) => {
message.error(e.message);
});
};
const onClose = () => {
updateVisible(false);
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const equipmentForm = {
...form
};
console.log(equipmentForm, 'equipmentForm');
const saveOrUpdate = isUpdate.value
? updateBcEquipment
: addBcEquipment;
saveOrUpdate(equipmentForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data
});
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

107
src/views/baocan/notice/components/search.vue Normal file
View File

@@ -0,0 +1,107 @@
<!-- 搜索表单 -->
<template>
<a-space>
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<PlusOutlined />
</template>
<span>绑定设备</span>
</a-button>
<a-button
danger
type="primary"
class="ele-btn-icon"
:v-role="`dev`"
@click="removeBatch"
:disabled="props.selection.length === 0"
>
<template #icon>
<DeleteOutlined />
</template>
<span>批量删除</span>
</a-button>
<!-- <a-input-search-->
<!-- allow-clear-->
<!-- v-model:value="searchText"-->
<!-- placeholder="请输入搜索关键词"-->
<!-- @search="search"-->
<!-- @pressEnter="search"-->
<!-- />-->
</a-space>
</template>
<script lang="ts" setup>
import {
PlusOutlined,
EditOutlined,
DeleteOutlined
} from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import type { EquipmentParam } from '@/api/apps/equipment/model';
import { ref, watch } from 'vue';
const emit = defineEmits<{
(e: 'search', where?: EquipmentParam): void;
(e: 'add'): void;
(e: 'remove'): void;
}>();
const props = defineProps<{
// 勾选的项目
selection?: [];
}>();
// 表单数据
const { where } = useSearch<EquipmentParam>({
equipmentId: undefined,
equipmentName: '',
equipmentCode: '',
merchantCode: ''
});
// 下来选项
const type = ref('equipmentCode');
// tabType
// const listType = ref('all');
// 搜索内容
const searchText = ref('');
/* 搜索 */
const search = () => {
where.equipmentName = undefined;
where.equipmentCode = undefined;
where.merchantCode = undefined;
if (type.value == 'equipmentName') {
where.equipmentName = searchText.value;
}
if (type.value == 'equipmentCode') {
where.equipmentCode = searchText.value;
}
if (type.value == 'merchantCode') {
where.merchantCode = searchText.value;
}
emit('search', where);
};
// 新增
const add = () => {
emit('add');
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
/* 重置 */
// const reset = () => {
// resetFields();
// search();
// };
// 监听字典id变化
watch(
() => props.selection,
() => {}
);
</script>

231
src/views/baocan/notice/index.vue Normal file
View File

@@ -0,0 +1,231 @@
<!-- 用户编辑弹窗 -->
<template>
<div class="page">
<div class="ele-body">
<a-card :bordered="false">
<a-form
ref="formRef"
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
layout="vertical"
:model="form"
:rules="rules"
>
<a-form-item label="标题" name="title">
<a-input
allow-clear
placeholder="请输入标题"
:disabled="isUpdate"
v-model:value="form.title"
/>
</a-form-item>
<a-form-item label="发送范围" name="channel">
<a-input
allow-clear
placeholder="请输入用户名"
v-model:value="form.channel"
/>
</a-form-item>
<a-form-item label="内容" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入内容"
v-model:value="form.comments"
/>
<a-space>
<a-button
type="primary"
class="ele-btn-icon"
style="margin-top: 10px"
@click="save"
>
<span>保存</span>
</a-button>
<a-button
class="ele-btn-icon"
style="margin-top: 10px"
@click="send"
>
<span>发送</span>
</a-button>
</a-space>
</a-form-item>
</a-form>
</a-card>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { BcEquipment } from '@/api/apps/bc/equipment/model';
import {
addBcEquipment,
updateBcEquipment,
addSend
} from '@/api/apps/bc/equipment';
import { FormInstance, Rule } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { Notice } from '@/api/oa/notice/model';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: BcEquipment | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 是否是修改
const isUpdate = ref(false);
// 提交状态
const loading = ref(false);
const formRef = ref<FormInstance | null>(null);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单数据
const { form, resetFields, assignFields } = useFormData<Notice>({
title: '通知',
channel: 'ZhaiLing',
comments: '您的申请已通过',
status: 0
});
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
title: [
{
required: true,
message: '请输入设备名称',
type: 'string',
trigger: 'blur'
}
],
channel: [
{
required: true,
type: 'string',
message: '请选择发布范围',
trigger: 'blur'
}
],
comments: [
{
required: true,
type: 'string',
message: '请填写内容',
trigger: 'blur'
}
],
status: [
{
required: true,
type: 'number',
message: '请选择设备状态',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
type: 'number',
message: '请输入排序号',
trigger: 'blur'
}
]
});
/* 控制放店开关 */
const editStatus = () => {
if (form.status == 0) {
form.status = 1;
} else {
form.status = 0;
}
updateBcEquipment(form)
.then(() => {
message.success('操作成功');
})
.catch((e) => {
message.error(e.message);
});
};
const onClose = () => {
updateVisible(false);
};
const send = () => {
addSend(form).then();
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const equipmentForm = {
...form
};
console.log(equipmentForm, 'equipmentForm');
const saveOrUpdate = isUpdate.value
? updateBcEquipment
: addBcEquipment;
saveOrUpdate(equipmentForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignFields({
...props.data
});
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

118
src/views/baocan/order/components/field.vue Normal file
View File

@@ -0,0 +1,118 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="500px"
:visible="visible"
:confirm-loading="loading"
:title="`修改价格`"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form layout="horizontal">
<a-form-item>
<a-input-number :min="0" style="width: 200px" v-model:value="content" />
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import { updateOrder } from '@/api/order';
import { Order } from '@/api/order/model';
import { createOrderNo } from "@/utils/common";
// import { reloadPageTab } from '@/utils/page-tab-util';
const useForm = Form.useForm;
// 是否是修改
const isUpdate = ref(false);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
data?: Order | null;
// 修改回显的数据
field?: string | null;
orderId?: number | 0;
content?: number | 0;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
const content = ref<number>(0);
const placeholder = ref('请输入订单金额');
// 用户信息
const form = reactive<Order>({
orderId: 0,
comments: '',
payPrice: undefined
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
const { resetFields, validate } = useForm(form);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
// 判断更新字段
form.orderId = props.orderId;
if (props.field === 'payPrice') {
form.payPrice = Number(content.value);
form.totalPrice = Number(content.value);
form.orderNo = createOrderNo();
}
updateOrder(form)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.orderId) {
loading.value = false;
content.value = props.content;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
if (props.field == 'tenantCode') {
placeholder.value = '请输入要绑定的主体编号';
content.value = undefined;
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
</style>

139
src/views/baocan/order/components/markdown.vue Normal file
View File

@@ -0,0 +1,139 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="600px"
:visible="visible"
:confirm-loading="loading"
:title="`修改内容`"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<!-- 编辑器 -->
<byte-md-editor
v-model:value="content"
:locale="zh_Hans"
:plugins="plugins"
uploadImages
height="300px"
:editorConfig="{ lineNumbers: true }"
/>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import { updateOrder } from '@/api/order';
import { Order } from '@/api/order/model';
// import { reloadPageTab } from '@/utils/page-tab-util';
import 'bytemd/dist/index.min.css';
import 'github-markdown-css/github-markdown-light.css';
// import TinymceEditor from '@/components/TinymceEditor/index.vue';
import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
import highlight from '@bytemd/plugin-highlight';
// 中文语言文件
import zh_Hans from 'bytemd/locales/zh_Hans.json';
// // 链接、删除线、复选框、表格等的插件
import gfm from '@bytemd/plugin-gfm';
// // 插件的中文语言文件
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
// // 预览界面的样式，这里用的 github 的 markdown 主题
import 'github-markdown-css/github-markdown-light.css';
const useForm = Form.useForm;
// 是否是修改
const isUpdate = ref(false);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
data?: Order | null;
// 修改回显的数据
field?: string | null;
content?: string;
orderId?: number;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 插件
const plugins = ref([
gfm({
locale: zh_HansGfm
}),
highlight()
]);
// 提交状态
const loading = ref(false);
const content = ref('');
// 用户信息
const form = reactive<Order>({
orderId: 0,
comments: ''
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
const { resetFields, validate } = useForm(form);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
// 判断更新字段
form.orderId = props.orderId;
if (props.field === 'content') {
form.comments = content.value;
}
if (props.field === 'comments') {
form.comments = content.value;
}
updateOrder(form)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
content.value = String(props.content);
console.log(visible);
if (visible) {
if (props.data) {
loading.value = false;
content.value = String(props.content);
assignObject(form, props.data);
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
</style>

289
src/views/baocan/order/components/order-edit.vue Normal file
View File

@@ -0,0 +1,289 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="680"
:visible="visible"
:confirm-loading="loading"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑订单' : '添加订单'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-space>
<a-form
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
>
<a-row :gutter="16">
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="订单名称" v-bind="validateInfos.customerName">
<a-input
allow-clear
:maxlength="30"
placeholder="请输入订单名称"
v-model:value="form.customerName"
@blur="
validate('customerName', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="订单标识" v-bind="validateInfos.customerCode">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入用户账号"
v-model:value="form.customerCode"
/>
</a-form-item>
<a-form-item label="跟进状态" v-bind="validateInfos.progress">
<progress-select
v-model:value="form.progress"
@blur="
validate('progress', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="订单类型" v-bind="validateInfos.customerType">
<type-select
v-model:value="form.customerType"
@blur="
validate('customerType', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="订单来源" v-bind="validateInfos.customerSource">
<source-select
v-model:value="form.customerSource"
@blur="
validate('customerSource', { trigger: 'blur' }).catch(() => {})
"
/>
</a-form-item>
<a-form-item label="头像" v-bind="validateInfos.customerAvatar">
<ele-image-upload
v-model:value="images"
:item-style="{ width: '90px', height: '90px' }"
:limit="1"
@upload="onUpload"
/>
</a-form-item>
</a-col>
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="联系人" v-bind="validateInfos.customerContacts">
<a-input
allow-clear
:maxlength="20"
placeholder="请填写联系人"
v-model:value="form.customerContacts"
/>
</a-form-item>
<a-form-item label="手机号码" v-bind="validateInfos.customerMobile">
<a-input
allow-clear
:maxlength="20"
placeholder="请填写联系人手机号码"
v-model:value="form.customerMobile"
/>
</a-form-item>
<a-form-item
label="联系地址"
v-bind="validateInfos.customerAddress"
>
<a-input
allow-clear
placeholder="请填写联系地址"
v-model:value="form.customerAddress"
/>
</a-form-item>
<a-form-item label="公司座机" v-bind="validateInfos.customerPhone">
<a-input
allow-clear
:maxlength="20"
placeholder="请填写公司座机电话"
v-model:value="form.customerPhone"
/>
</a-form-item>
<a-form-item label="排序" v-bind="validateInfos.sortNumber">
<a-input
allow-clear
:maxlength="20"
placeholder="排序"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="备注" v-bind="validateInfos.comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入备注"
v-model:value="form.comments"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-space>
</ele-modal>
</template>
<script lang="ts" setup>
import {ref, reactive, watch, computed} from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import TypeSelect from './customer-edit/type-select.vue';
import ProgressSelect from './customer-edit/progress-select.vue';
import SourceSelect from './customer-edit/source-select.vue';
import { addCustomer, updateCustomer } from '@/api/oa/customer';
import type { Customer } from '@/api/oa/customer/model';
import { createCode } from '@/utils/common';
import { uploadFile } from '@/api/system/file';
import type { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FILE_SERVER } from '@/config/setting';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
// 当前用户信息
const loginUser = computed(() => userStore.info ?? {});
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Customer | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 用户信息
const form = reactive<Customer>({
customerCode: '',
customerName: '',
customerType: undefined,
progress: undefined,
customerMobile: '',
customerAvatar: '',
customerPhone: '',
customerContacts: '',
customerAddress: '',
comments: '',
status: '0',
sortNumber: 100,
customerId: 0,
userId: '',
});
// 已上传数据, 可赋初始值用于回显
const images = ref(<any>[]);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
customerName: [
{
required: true,
type: 'string',
message: '请输入订单名称',
trigger: 'blur'
}
],
customerCode: [
{
required: true,
type: 'string',
message: '请输入合法的IP地址',
trigger: 'blur'
}
],
progress: [
{
required: true,
type: 'string',
message: '请选择跟进状态',
trigger: 'blur'
}
]
});
const { resetFields, validate, validateInfos } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
validate()
.then(() => {
loading.value = true;
// 去除空格
form.customerName = form.customerName?.replace(/\s*/g, '');
if(isUpdate.value == false) {
form.userId = loginUser.value.userId;
}
const data = {
...form
};
// 转字符串
const saveOrUpdate = isUpdate.value ? updateCustomer : addCustomer;
saveOrUpdate(data)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
const onUpload = (d: ItemType) => {
uploadFile(<File>d.file)
.then((result) => {
form.customerAvatar = result.path;
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
// 头像赋值
images.value = [];
if(props.data.customerAvatar){
images.value.push({ uid:1, url: FILE_SERVER + props.data.customerAvatar, status: '' });
}
assignObject(form, props.data);
isUpdate.value = true;
} else {
form.customerCode = createCode();
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less"></style>

379
src/views/baocan/order/components/order-info.vue Normal file
View File

@@ -0,0 +1,379 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="`80%`"
:visible="visible"
:confirm-loading="loading"
:maxable="maxAble"
:title="isUpdate ? '编辑订单' : '订单详情'"
:body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
@update:visible="updateVisible"
:maskClosable="false"
:footer="null"
@ok="save"
>
<a-card title="订单详情" class="order-card">
<!-- <a-space>-->
<!-- <a-button>发货</a-button>-->
<!-- <a-button>商家备注</a-button>-->
<!-- <a-button>打印小票</a-button>-->
<!-- </a-space>-->
<a-row :gutter="16">
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单号" name="orderId">
<span>{{ data.orderId }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="实付款金额" name="payPrice">
<span class="ele-text-warning"
>￥{{ formatNumber(data.payPrice) }}</span
>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单状态" name="orderStatus">
<a-tag>{{ data.payStatus === 20 ? '已下单' : '' }}</a-tag>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="买家信息" name="deliveryType">
<router-link :to="'/system/user/details?id=' + data.userId">
<span class="ele-text-primary">{{ data.nickname }}</span>
</router-link>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="预定日期" name="deliveryTime">
{{ toDateString(data.deliveryTime, 'yyyy-MM-dd') }}
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="下单时间" name="createTime">
{{ data.createTime }}
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="交易流水号" name="orderNo">
{{ data.orderNo }}
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="买家留言" name="buyerRemark">
<span>{{ data.buyerRemark }}</span>
</a-form-item>
</a-col>
<a-col
v-bind="
styleResponsive
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
: { span: 8 }
"
>
<a-form-item label="订单备注" name="comments">
<span>{{ data.comments }}</span>
</a-form-item>
</a-col>
</a-row>
</a-card>
<a-card title="菜品信息" class="order-card">
<a-spin :spinning="loading">
<a-table
:data-source="orderGoodsList"
:columns="columns"
:pagination="false"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'goodsName'">
<div class="goods-info">
<a-image
v-if="record.imageUrl"
:src="record.imageUrl"
:preview="false"
:width="50"
/>
<div class="info">
<div>{{ record.goodsName }}</div>
<div class="ele-text-placeholder" v-if="record.gear === 10">
食堂档口
</div>
<div class="ele-text-placeholder" v-if="record.gear === 20">
物品档口
</div>
</div>
</div>
</template>
</template>
</a-table>
</a-spin>
</a-card>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form } from 'ant-design-vue';
import { assignObject, toDateString } from 'ele-admin-pro';
import { useThemeStore } from '@/store/modules/theme';
import { formatNumber } from 'ele-admin-pro/es';
import { storeToRefs } from 'pinia';
import { Order } from '@/api/order/model';
import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
import { OrderGoods } from '@/api/order/goods/model';
import { listOrderGoods } from '@/api/order/goods';
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Order | null;
}>();
export interface step {
title?: String | undefined;
subTitle?: String | undefined;
description?: String | undefined;
}
// 是否是修改
const isUpdate = ref(false);
// 是否显示最大化切换按钮
const maxAble = ref(true);
const orderGoodsList = ref<OrderGoods[]>([]);
// 步骤条
const steps = ref<step[]>([
{
title: '报餐',
description: undefined
},
{
title: '付款',
description: undefined
},
{
title: '发餐',
description: undefined
},
{
title: '取餐',
description: undefined
},
{
title: '完成',
description: undefined
}
]);
const active = ref(2);
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 订单信息
const order = reactive<Order>({
orderId: undefined,
orderNo: '',
userId: undefined,
orderSourceData: ''
});
// 请求状态
const loading = ref(true);
const { resetFields } = useForm(order);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
const columns = ref<ColumnItem[]>([
// {
// title: '菜品ID',
// dataIndex: 'goodsId'
// },
{
title: '菜品信息',
dataIndex: 'goodsName',
key: 'goodsName'
},
{
title: '菜品价格',
dataIndex: 'goodsPrice',
customRender: ({ text }) => '￥' + text
},
{
title: '购买数量',
dataIndex: 'totalNum',
key: 'totalNum'
},
{
title: '预定日期',
dataIndex: 'deliveryTime',
key: 'deliveryTime',
customRender: () => toDateString(props.data?.deliveryTime, 'yyyy-MM-dd')
},
{
title: '状态',
dataIndex: 'deliveryStatus',
key: 'deliveryStatus',
customRender: ({ text }) => (text == 10 ? '未签到' : '已签到')
}
]);
/* 制作步骤条 */
const loadSteps = (order) => {
steps.value = [];
steps.value.push({
title: '下单'
});
steps.value.push({
title: '付款'
});
steps.value.push({
title: '发货'
});
steps.value.push({
title: '收货'
});
steps.value.push({
title: '完成'
});
// 下单
if (order.payStatus == 10) {
active.value = 0;
steps.value[0].description = order.createTime;
}
// 付款
if (order.payStatus == 20) {
active.value = 1;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
}
// 发货
if (order.payStatus == 20 && order.deliveryStatus == 20) {
active.value = 2;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
}
// 收货
if (order.payStatus == 20 && order.receiptStatus == 20) {
active.value = 3;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
steps.value[3].description = order.receiptTime;
}
// 完成
if (order.payStatus == 20 && order.orderStatus == 30) {
active.value = 4;
steps.value[0].description = order.createTime;
steps.value[1].description = order.payTime;
steps.value[2].description = order.deliveryTime;
steps.value[3].description = order.receiptTime;
}
// 已取消
if (order.orderStatus == 20) {
active.value = 4;
}
};
const getOrderGoods = () => {
const orderId = props.data?.orderId;
listOrderGoods({ orderId }).then((data) => {
orderGoodsList.value = data.filter((d) => d.totalNum > 0);
});
};
/* 保存编辑 */
const save = () => {};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignObject(order, props.data);
loadSteps(props.data);
getOrderGoods();
}
} else {
resetFields();
}
}
);
</script>
<style lang="less" scoped>
.order-card {
margin-bottom: 20px;
}
.ant-form-item {
margin-bottom: 5px;
}
.goods-info {
display: flex;
.info {
padding-left: 5px;
display: flex;
flex-direction: column;
}
}
</style>

161
src/views/baocan/order/components/search.vue Normal file
View File

@@ -0,0 +1,161 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-button
danger
type="primary"
class="ele-btn-icon"
:disabled="selection.length === 0"
@click="removeBatch"
>
<template #icon>
<delete-outlined />
</template>
<span>批量删除</span>
</a-button>
<a-radio-group v-model:value="listType" @change="handleTabs">
<a-radio-button :value="0">全部</a-radio-button>
<a-radio-button :value="1">已下单</a-radio-button>
<a-radio-button :value="4">已完成</a-radio-button>
<a-radio-button :value="5">待付款</a-radio-button>
<a-radio-button :value="6">临时报餐</a-radio-button>
</a-radio-group>
<a-date-picker
placeholder="预定日期"
value-format="YYYY-MM-DD"
v-model:value="where.deliveryTime"
@change="search"
/>
<a-select
v-model:value="where.week"
style="width: 120px"
placeholder="请选择星期"
allow-clear
@change="handleWeek"
>
<a-select-option :value="1">星期一</a-select-option>
<a-select-option :value="2">星期二</a-select-option>
<a-select-option :value="3">星期三</a-select-option>
<a-select-option :value="4">星期四</a-select-option>
<a-select-option :value="5">星期五</a-select-option>
<a-select-option :value="6">星期六</a-select-option>
<a-select-option :value="0">星期日</a-select-option>
</a-select>
<a-input-search
allow-clear
placeholder="请输入关键词"
v-model:value="where.keywords"
@pressEnter="search"
@search="search"
/>
</a-space>
</template>
<script lang="ts" setup>
import useSearch from '@/utils/use-search';
import { ref, watch } from 'vue';
import { OrderParam } from '@/api/order/model';
import { assignObject } from 'ele-admin-pro';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: OrderParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'advanced'): void;
}>();
// 表单数据
const { where, resetFields } = useSearch<OrderParam>({
orderNo: undefined,
userId: undefined,
payStatus: undefined,
week: undefined,
deliveryStatus: undefined,
orderStatus: undefined
});
// 日期范围选择
const dateRange = ref<[string, string]>(['', '']);
const listType = ref<number>(0);
/* 搜索 */
const search = () => {
const [d1, d2] = dateRange.value ?? [];
emit('search', {
...where,
createTimeStart: d1 ? d1 + ' 00:00:00' : '',
createTimeEnd: d2 ? d2 + ' 23:59:59' : '',
deliveryTime: where.deliveryTime ? where.deliveryTime + ' 00:00:00' : ''
});
};
// 批量删除
const removeBatch = () => {
emit('remove');
};
const handleTabs = (e) => {
resetFields();
const listType = Number(e.target.value);
// 全部订单
if (listType == 0) {
assignObject(where, {});
console.log('全部');
}
// 待发货
if (listType == 1) {
console.log('已下单');
where.payStatus = 20;
where.orderStatus = 10;
}
// 待收货
// if (listType == 2) {
// console.log('待发货');
// where.payStatus = 20;
// where.deliveryStatus = 20;
// where.receiptStatus = 10;
// }
// 待付款
// if (listType == 3) {
// console.log('待付款');
// where.orderStatus = 20;
// }
// 已完成
if (listType == 4) {
console.log('已完成');
where.payStatus = 20;
where.deliveryStatus = 30;
}
// 已取消
if (listType == 5) {
where.payStatus = 10;
}
// 已取消
if (listType == 6) {
console.log('临时报餐');
where.isTemporary = 1;
}
console.log(where);
emit('search', {
...where
});
};
const handleWeek = (index) => {
where.week = index;
search();
};
watch(
() => props.selection,
() => {}
);
</script>

Some files were not shown because too many files have changed in this diff Show More