Merge branch 'master' of https://gitee.com/yudaocode/yudao-ui-admin-vue3 into feature/bpm
This commit is contained in:
YunaiV
@@ -1,142 +1,279 @@
|
||||
<template>
|
||||
<Form
|
||||
<el-form
|
||||
v-show="getShow"
|
||||
:rules="rules"
|
||||
:schema="schema"
|
||||
class="w-[100%] dark:(border-1 border-[var(--el-border-color)] border-solid)"
|
||||
hide-required-asterisk
|
||||
ref="formLogin"
|
||||
:model="registerData.registerForm"
|
||||
:rules="registerRules"
|
||||
class="login-form"
|
||||
label-position="top"
|
||||
label-width="120px"
|
||||
size="large"
|
||||
@register="register"
|
||||
>
|
||||
<template #title>
|
||||
<LoginFormTitle style="width: 100%" />
|
||||
</template>
|
||||
|
||||
<template #code="form">
|
||||
<div class="w-[100%] flex">
|
||||
<el-input v-model="form['code']" :placeholder="t('login.codePlaceholder')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #register>
|
||||
<div class="w-[100%]">
|
||||
<XButton
|
||||
:loading="loading"
|
||||
:title="t('login.register')"
|
||||
class="w-[100%]"
|
||||
type="primary"
|
||||
@click="loginRegister()"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-15px w-[100%]">
|
||||
<XButton :title="t('login.hasUser')" class="w-[100%]" @click="handleBackLogin()" />
|
||||
</div>
|
||||
</template>
|
||||
</Form>
|
||||
<el-row style="margin-right: -10px; margin-left: -10px">
|
||||
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
|
||||
<el-form-item>
|
||||
<LoginFormTitle style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
|
||||
<el-form-item v-if="registerData.tenantEnable === 'true'" prop="tenantName">
|
||||
<el-input
|
||||
v-model="registerData.registerForm.tenantName"
|
||||
:placeholder="t('login.tenantname')"
|
||||
:prefix-icon="iconHouse"
|
||||
link
|
||||
type="primary"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="registerData.registerForm.username"
|
||||
:placeholder="t('login.username')"
|
||||
size="large"
|
||||
:prefix-icon="iconAvatar"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="registerData.registerForm.nickname"
|
||||
placeholder="昵称"
|
||||
size="large"
|
||||
:prefix-icon="iconAvatar"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="registerData.registerForm.password"
|
||||
type="password"
|
||||
auto-complete="off"
|
||||
:placeholder="t('login.password')"
|
||||
size="large"
|
||||
:prefix-icon="iconLock"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
|
||||
<el-form-item prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="registerData.registerForm.confirmPassword"
|
||||
type="password"
|
||||
size="large"
|
||||
auto-complete="off"
|
||||
:placeholder="t('login.checkPassword')"
|
||||
:prefix-icon="iconLock"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
|
||||
<el-form-item>
|
||||
<XButton
|
||||
:loading="loginLoading"
|
||||
:title="t('login.register')"
|
||||
class="w-[100%]"
|
||||
type="primary"
|
||||
@click="getCode()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<Verify
|
||||
ref="verify"
|
||||
:captchaType="captchaType"
|
||||
:imgSize="{ width: '400px', height: '200px' }"
|
||||
mode="pop"
|
||||
@success="handleRegister"
|
||||
/>
|
||||
</el-row>
|
||||
<XButton :title="t('login.hasUser')" class="w-[100%]" @click="handleBackLogin()" />
|
||||
</el-form>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormRules } from 'element-plus'
|
||||
|
||||
import { useForm } from '@/hooks/web/useForm'
|
||||
import { useValidator } from '@/hooks/web/useValidator'
|
||||
import { ElLoading } from 'element-plus'
|
||||
import LoginFormTitle from './LoginFormTitle.vue'
|
||||
import type { RouteLocationNormalizedLoaded } from 'vue-router'
|
||||
import { useIcon } from '@/hooks/web/useIcon'
|
||||
import * as authUtil from '@/utils/auth'
|
||||
import { usePermissionStore } from '@/store/modules/permission'
|
||||
import * as LoginApi from '@/api/login'
|
||||
import { LoginStateEnum, useLoginState } from './useLogin'
|
||||
import { FormSchema } from '@/types/form'
|
||||
|
||||
defineOptions({ name: 'RegisterForm' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const { required } = useValidator()
|
||||
const { register, elFormRef } = useForm()
|
||||
const iconHouse = useIcon({ icon: 'ep:house' })
|
||||
const iconAvatar = useIcon({ icon: 'ep:avatar' })
|
||||
const iconLock = useIcon({ icon: 'ep:lock' })
|
||||
const formLogin = ref()
|
||||
const { handleBackLogin, getLoginState } = useLoginState()
|
||||
const { currentRoute, push } = useRouter()
|
||||
const permissionStore = usePermissionStore()
|
||||
const redirect = ref<string>('')
|
||||
const loginLoading = ref(false)
|
||||
const verify = ref()
|
||||
const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
|
||||
|
||||
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
|
||||
|
||||
const schema = reactive<FormSchema[]>([
|
||||
{
|
||||
field: 'title',
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'username',
|
||||
label: t('login.username'),
|
||||
value: '',
|
||||
component: 'Input',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
componentProps: {
|
||||
placeholder: t('login.usernamePlaceholder')
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'password',
|
||||
label: t('login.password'),
|
||||
value: '',
|
||||
component: 'InputPassword',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
componentProps: {
|
||||
style: {
|
||||
width: '100%'
|
||||
},
|
||||
strength: true,
|
||||
placeholder: t('login.passwordPlaceholder')
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'check_password',
|
||||
label: t('login.checkPassword'),
|
||||
value: '',
|
||||
component: 'InputPassword',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
componentProps: {
|
||||
style: {
|
||||
width: '100%'
|
||||
},
|
||||
strength: true,
|
||||
placeholder: t('login.passwordPlaceholder')
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'code',
|
||||
label: t('login.code'),
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'register',
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
const equalToPassword = (rule, value, callback) => {
|
||||
if (registerData.registerForm.password !== value) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
])
|
||||
|
||||
const rules: FormRules = {
|
||||
username: [required()],
|
||||
password: [required()],
|
||||
check_password: [required()],
|
||||
code: [required()]
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const registerRules = {
|
||||
tenantName: [
|
||||
{ required: true, trigger: 'blur', message: '请输入您所属的租户' },
|
||||
{ min: 2, max: 20, message: '租户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
|
||||
],
|
||||
username: [
|
||||
{ required: true, trigger: 'blur', message: '请输入您的账号' },
|
||||
{ min: 4, max: 30, message: '用户账号长度必须介于 4 和 30 之间', trigger: 'blur' }
|
||||
],
|
||||
nickname: [
|
||||
{ required: true, trigger: 'blur', message: '请输入您的昵称' },
|
||||
{ min: 0, max: 30, message: '昵称长度必须介于 0 和 30 之间', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: 'blur', message: '请输入您的密码' },
|
||||
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
|
||||
{ pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, trigger: 'blur', message: '请再次输入您的密码' },
|
||||
{ required: true, validator: equalToPassword, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const loginRegister = async () => {
|
||||
const formRef = unref(elFormRef)
|
||||
formRef?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
loading.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
const registerData = reactive({
|
||||
isShowPassword: false,
|
||||
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
|
||||
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
|
||||
registerForm: {
|
||||
tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
|
||||
nickname: '',
|
||||
tenantId: 0,
|
||||
username: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
captchaVerification: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 提交注册
|
||||
const handleRegister = async (params: any) => {
|
||||
loading.value = true
|
||||
try {
|
||||
if (registerData.tenantEnable) {
|
||||
await getTenantId()
|
||||
registerData.registerForm.tenantId = authUtil.getTenantId()
|
||||
}
|
||||
})
|
||||
|
||||
if (registerData.captchaEnable) {
|
||||
registerData.registerForm.captchaVerification = params.captchaVerification
|
||||
}
|
||||
|
||||
const res = await LoginApi.register(registerData.registerForm)
|
||||
if (!res) {
|
||||
return
|
||||
}
|
||||
loading.value = ElLoading.service({
|
||||
lock: true,
|
||||
text: '正在加载系统中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
|
||||
authUtil.removeLoginForm()
|
||||
|
||||
authUtil.setToken(res)
|
||||
if (!redirect.value) {
|
||||
redirect.value = '/'
|
||||
}
|
||||
// 判断是否为SSO登录
|
||||
if (redirect.value.indexOf('sso') !== -1) {
|
||||
window.location.href = window.location.href.replace('/login?redirect=', '')
|
||||
} else {
|
||||
push({ path: redirect.value || permissionStore.addRouters[0].path })
|
||||
}
|
||||
} finally {
|
||||
loginLoading.value = false
|
||||
loading.value.close()
|
||||
}
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
const getCode = async () => {
|
||||
// 情况一，未开启：则直接注册
|
||||
if (registerData.captchaEnable === 'false') {
|
||||
await handleRegister({})
|
||||
} else {
|
||||
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行注册
|
||||
// 弹出验证码
|
||||
verify.value.show()
|
||||
}
|
||||
}
|
||||
|
||||
// 获取租户 ID
|
||||
const getTenantId = async () => {
|
||||
if (registerData.tenantEnable === 'true') {
|
||||
const res = await LoginApi.getTenantIdByName(registerData.registerForm.tenantName)
|
||||
authUtil.setTenantId(res)
|
||||
}
|
||||
}
|
||||
|
||||
// 根据域名，获得租户信息
|
||||
const getTenantByWebsite = async () => {
|
||||
const website = location.host
|
||||
const res = await LoginApi.getTenantByWebsite(website)
|
||||
if (res) {
|
||||
registerData.registerForm.tenantName = res.name
|
||||
authUtil.setTenantId(res.id)
|
||||
}
|
||||
}
|
||||
const loading = ref() // ElLoading.service 返回的实例
|
||||
|
||||
watch(
|
||||
() => currentRoute.value,
|
||||
(route: RouteLocationNormalizedLoaded) => {
|
||||
redirect.value = route?.query?.redirect as string
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
onMounted(() => {
|
||||
// getCookie()
|
||||
getTenantByWebsite()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.anticon) {
|
||||
&:hover {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.login-code {
|
||||
float: right;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 100px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -19,10 +19,10 @@
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属流程" prop="processDefinitionId">
|
||||
<el-form-item label="所属流程" prop="processDefinitionKey">
|
||||
<el-input
|
||||
v-model="queryParams.processDefinitionId"
|
||||
placeholder="请输入流程定义的编号"
|
||||
v-model="queryParams.processDefinitionKey"
|
||||
placeholder="请输入流程定义的标识"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
@@ -183,7 +183,7 @@ const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: '',
|
||||
processDefinitionId: undefined,
|
||||
processDefinitionKey: undefined,
|
||||
category: undefined,
|
||||
status: undefined,
|
||||
createTime: []
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
ref="permissionListRef"
|
||||
:biz-id="contract.id!"
|
||||
:biz-type="BizTypeEnum.CRM_CONTRACT"
|
||||
:show-action="!permissionListRef?.isPool || false"
|
||||
:show-action="true"
|
||||
@quit-team="close"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { useWebSocket } from '@vueuse/core'
|
||||
import { getAccessToken } from '@/utils/auth'
|
||||
import { getRefreshToken } from '@/utils/auth'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
|
||||
defineOptions({ name: 'InfraWebSocket' })
|
||||
@@ -79,7 +79,9 @@ defineOptions({ name: 'InfraWebSocket' })
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const server = ref(
|
||||
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + '?token=' + getAccessToken()
|
||||
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
|
||||
'?token=' +
|
||||
getRefreshToken() // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
|
||||
) // WebSocket 服务地址
|
||||
const getIsOpen = computed(() => status.value === 'OPEN') // WebSocket 连接是否打开
|
||||
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')) // WebSocket 连接的展示颜色
|
||||
|
||||
156
src/views/iot/device/DeviceForm.vue
Normal file
156
src/views/iot/device/DeviceForm.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<el-select
|
||||
v-model="formData.productId"
|
||||
placeholder="请选择产品"
|
||||
:disabled="formType === 'update'"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:label="product.name"
|
||||
:value="product.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="DeviceName" prop="deviceName">
|
||||
<el-input
|
||||
v-model="formData.deviceName"
|
||||
placeholder="请输入 DeviceName"
|
||||
:disabled="formType === 'update'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注名称" prop="nickname">
|
||||
<el-input v-model="formData.nickname" placeholder="请输入备注名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { DeviceApi, DeviceVO } from '@/api/iot/device'
|
||||
import { ProductApi } from '@/api/iot/product'
|
||||
|
||||
/** IoT 设备 表单 */
|
||||
defineOptions({ name: 'IoTDeviceForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
productId: undefined,
|
||||
deviceName: undefined,
|
||||
nickname: undefined
|
||||
})
|
||||
const formRules = reactive({
|
||||
productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
|
||||
deviceName: [
|
||||
{
|
||||
pattern: /^[a-zA-Z0-9_.\-:@]{4,32}$/,
|
||||
message:
|
||||
'支持英文字母、数字、下划线（_）、中划线（-）、点号（.）、半角冒号（:）和特殊字符@，长度限制为 4~32 个字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === undefined || value === null) {
|
||||
callback()
|
||||
return
|
||||
}
|
||||
const length = value.replace(/[\u4e00-\u9fa5\u3040-\u30ff]/g, 'aa').length
|
||||
if (length < 4 || length > 64) {
|
||||
callback(new Error('备注名称长度限制为 4~64 个字符，中文及日文算 2 个字符'))
|
||||
} else if (!/^[\u4e00-\u9fa5\u3040-\u30ff_a-zA-Z0-9]+$/.test(value)) {
|
||||
callback(new Error('备注名称只能包含中文、英文字母、日文、数字和下划线（_）'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await DeviceApi.getDevice(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as DeviceVO
|
||||
if (formType.value === 'create') {
|
||||
await DeviceApi.createDevice(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await DeviceApi.updateDevice(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
productId: undefined,
|
||||
deviceName: undefined,
|
||||
nickname: undefined
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
/** 查询字典下拉列表 */
|
||||
const products = ref()
|
||||
const getProducts = async () => {
|
||||
products.value = await ProductApi.getSimpleProductList()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getProducts()
|
||||
})
|
||||
</script>
|
||||
76
src/views/iot/device/detail/DeviceDetailsHeader.vue
Normal file
76
src/views/iot/device/detail/DeviceDetailsHeader.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<span class="text-xl font-bold">{{ device.deviceName }}</span>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 右上：按钮 -->
|
||||
<el-button
|
||||
@click="openForm('update', device.id)"
|
||||
v-hasPermi="['iot:device:update']"
|
||||
v-if="product.status === 0"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContentWrap class="mt-10px">
|
||||
<el-descriptions :column="5" direction="horizontal">
|
||||
<el-descriptions-item label="产品">
|
||||
<el-link @click="goToProductDetail(product.id)">{{ product.name }}</el-link>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="ProductKey">
|
||||
{{ product.productKey }}
|
||||
<el-button @click="copyToClipboard(product.productKey)">复制</el-button>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</ContentWrap>
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<DeviceForm ref="formRef" @success="emit('refresh')" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import DeviceForm from '@/views/iot/device/DeviceForm.vue'
|
||||
import { ProductVO } from '@/api/iot/product'
|
||||
import { DeviceVO } from '@/api/iot/device'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const message = useMessage()
|
||||
const router = useRouter()
|
||||
|
||||
// 操作修改
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
/**
|
||||
* 将文本复制到剪贴板
|
||||
*
|
||||
* @param text 需要复制的文本
|
||||
*/
|
||||
const copyToClipboard = (text: string) => {
|
||||
// TODO @haohao：可以考虑用 await 异步转同步哈
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
message.success('复制成功')
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到产品详情页面
|
||||
*
|
||||
* @param productId 产品 ID
|
||||
*/
|
||||
const goToProductDetail = (productId: number) => {
|
||||
router.push({ name: 'IoTProductDetail', params: { id: productId } })
|
||||
}
|
||||
</script>
|
||||
123
src/views/iot/device/detail/DeviceDetailsInfo.vue
Normal file
123
src/views/iot/device/detail/DeviceDetailsInfo.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-descriptions :column="3" title="设备信息">
|
||||
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="ProductKey">
|
||||
{{ product.productKey }}
|
||||
<el-button @click="copyToClipboard(product.productKey)">复制</el-button>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="设备类型">
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="DeviceName">
|
||||
{{ device.deviceName }}
|
||||
<el-button @click="copyToClipboard(device.deviceName)">复制</el-button>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">
|
||||
{{ formatDate(device.createTime) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="激活时间">
|
||||
{{ formatDate(device.activeTime) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="最后上线时间">
|
||||
{{ formatDate(device.lastOnlineTime) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="当前状态">
|
||||
<dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="device.status" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="最后离线时间" :span="3">
|
||||
{{ formatDate(device.lastOfflineTime) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="MQTT 连接参数">
|
||||
<el-button type="primary" @click="openMqttParams">查看</el-button>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-collapse>
|
||||
|
||||
<!-- MQTT 连接参数弹框 -->
|
||||
<Dialog
|
||||
title="MQTT 连接参数"
|
||||
v-model="mqttDialogVisible"
|
||||
width="50%"
|
||||
:before-close="handleCloseMqttDialog"
|
||||
>
|
||||
<el-form :model="mqttParams" label-width="120px">
|
||||
<el-form-item label="clientId">
|
||||
<el-input v-model="mqttParams.mqttClientId" readonly>
|
||||
<template #append>
|
||||
<el-button @click="copyToClipboard(mqttParams.mqttClientId)" type="primary">
|
||||
<Icon icon="ph:copy" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="username">
|
||||
<el-input v-model="mqttParams.mqttUsername" readonly>
|
||||
<template #append>
|
||||
<el-button @click="copyToClipboard(mqttParams.mqttUsername)" type="primary">
|
||||
<Icon icon="ph:copy" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="passwd">
|
||||
<el-input v-model="mqttParams.mqttPassword" readonly type="password">
|
||||
<template #append>
|
||||
<el-button @click="copyToClipboard(mqttParams.mqttPassword)" type="primary">
|
||||
<Icon icon="ph:copy" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="mqttDialogVisible = false">关闭</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { ProductVO } from '@/api/iot/product'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { DeviceVO } from '@/api/iot/device'
|
||||
|
||||
const message = useMessage() // 消息提示
|
||||
|
||||
const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>() // 定义 Props
|
||||
|
||||
const emit = defineEmits(['refresh']) // 定义 Emits
|
||||
|
||||
const activeNames = ref(['basicInfo']) // 展示的折叠面板
|
||||
const mqttDialogVisible = ref(false) // 定义 MQTT 弹框的可见性
|
||||
const mqttParams = ref({
|
||||
mqttClientId: '',
|
||||
mqttUsername: '',
|
||||
mqttPassword: ''
|
||||
}) // 定义 MQTT 参数对象
|
||||
|
||||
/** 复制到剪贴板方法 */
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
message.success('复制成功')
|
||||
})
|
||||
}
|
||||
|
||||
/** 打开 MQTT 参数弹框的方法 */
|
||||
const openMqttParams = () => {
|
||||
mqttParams.value = {
|
||||
mqttClientId: device.mqttClientId || 'N/A',
|
||||
mqttUsername: device.mqttUsername || 'N/A',
|
||||
mqttPassword: device.mqttPassword || 'N/A'
|
||||
}
|
||||
mqttDialogVisible.value = true
|
||||
}
|
||||
|
||||
/** 关闭 MQTT 弹框的方法 */
|
||||
const handleCloseMqttDialog = () => {
|
||||
mqttDialogVisible.value = false
|
||||
}
|
||||
</script>
|
||||
66
src/views/iot/device/detail/index.vue
Normal file
66
src/views/iot/device/detail/index.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<DeviceDetailsHeader
|
||||
:loading="loading"
|
||||
:product="product"
|
||||
:device="device"
|
||||
@refresh="getDeviceData(id)"
|
||||
/>
|
||||
<el-col>
|
||||
<el-tabs>
|
||||
<el-tab-pane label="设备信息">
|
||||
<DeviceDetailsInfo :product="product" :device="device" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Topic 列表" />
|
||||
<el-tab-pane label="物模型数据" />
|
||||
<el-tab-pane label="子设备管理" />
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import { DeviceApi, DeviceVO } from '@/api/iot/device'
|
||||
import { ProductApi, ProductVO } from '@/api/iot/product'
|
||||
import DeviceDetailsHeader from '@/views/iot/device/detail/DeviceDetailsHeader.vue'
|
||||
import DeviceDetailsInfo from '@/views/iot/device/detail/DeviceDetailsInfo.vue'
|
||||
|
||||
defineOptions({ name: 'IoTDeviceDetail' })
|
||||
|
||||
const route = useRoute()
|
||||
const message = useMessage()
|
||||
const id = Number(route.params.id) // 编号
|
||||
const loading = ref(true) // 加载中
|
||||
const product = ref<ProductVO>({} as ProductVO) // 产品详情
|
||||
const device = ref<DeviceVO>({} as DeviceVO) // 设备详情
|
||||
|
||||
/** 获取设备详情 */
|
||||
const getDeviceData = async (id: number) => {
|
||||
loading.value = true
|
||||
try {
|
||||
device.value = await DeviceApi.getDevice(id)
|
||||
console.log(product.value)
|
||||
await getProductData(device.value.productId)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取产品详情 */
|
||||
const getProductData = async (id: number) => {
|
||||
product.value = await ProductApi.getProduct(id)
|
||||
console.log(product.value)
|
||||
}
|
||||
|
||||
/** 获取物模型 */
|
||||
|
||||
/** 初始化 */
|
||||
const { delView } = useTagsViewStore() // 视图操作
|
||||
const { currentRoute } = useRouter() // 路由
|
||||
onMounted(async () => {
|
||||
if (!id) {
|
||||
message.warning('参数错误，产品不能为空！')
|
||||
delView(unref(currentRoute))
|
||||
return
|
||||
}
|
||||
await getDeviceData(id)
|
||||
})
|
||||
</script>
|
||||
267
src/views/iot/device/index.vue
Normal file
267
src/views/iot/device/index.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<el-select
|
||||
v-model="queryParams.productId"
|
||||
placeholder="请选择产品"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:label="product.name"
|
||||
:value="product.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="DeviceName" prop="deviceName">
|
||||
<el-input
|
||||
v-model="queryParams.deviceName"
|
||||
placeholder="请输入 DeviceName"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注名称" prop="nickname">
|
||||
<el-input
|
||||
v-model="queryParams.nickname"
|
||||
placeholder="请输入备注名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select
|
||||
v-model="queryParams.deviceType"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择设备状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-5px" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-5px" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['iot:device:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" />
|
||||
新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="DeviceName" align="center" prop="deviceName">
|
||||
<template #default="scope">
|
||||
<el-link @click="openDetail(scope.row.id)">{{ scope.row.deviceName }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注名称" align="center" prop="nickname" />
|
||||
<el-table-column label="设备所属产品" align="center" prop="productId">
|
||||
<template #default="scope">
|
||||
{{ productMap[scope.row.productId] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备类型" align="center" prop="deviceType">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="最后上线时间"
|
||||
align="center"
|
||||
prop="lastOnlineTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center" min-width="120px">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openDetail(scope.row.id)"
|
||||
v-hasPermi="['iot:product:query']"
|
||||
>
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['iot:device:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['iot:device:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<DeviceForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { DeviceApi, DeviceVO } from '@/api/iot/device'
|
||||
import DeviceForm from './DeviceForm.vue'
|
||||
import { ProductApi } from '@/api/iot/product'
|
||||
|
||||
/** IoT 设备 列表 */
|
||||
defineOptions({ name: 'IoTDevice' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<DeviceVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
deviceName: undefined,
|
||||
productId: undefined,
|
||||
deviceType: undefined,
|
||||
nickname: undefined,
|
||||
status: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
/** 产品标号和名称的映射 */
|
||||
const productMap = reactive({})
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await DeviceApi.getDevicePage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
// 获取产品ID列表
|
||||
const productIds = [...new Set(data.list.map((device) => device.productId))]
|
||||
// 获取产品名称
|
||||
// TODO @haohao：最好后端拼接哈
|
||||
const products = await Promise.all(productIds.map((id) => ProductApi.getProduct(id)))
|
||||
products.forEach((product) => {
|
||||
productMap[product.id] = product.name
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 打开详情 */
|
||||
const { push } = useRouter()
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'IoTDeviceDetail', params: { id } })
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await DeviceApi.deleteDevice(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 查询字典下拉列表 */
|
||||
const products = ref()
|
||||
const getProducts = async () => {
|
||||
products.value = await ProductApi.getSimpleProductList()
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
getProducts()
|
||||
})
|
||||
</script>
|
||||
204
src/views/iot/product/ProductForm.vue
Normal file
204
src/views/iot/product/ProductForm.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select
|
||||
v-model="formData.deviceType"
|
||||
placeholder="请选择设备类型"
|
||||
:disabled="formType === 'update'"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="formData.deviceType === 0 || formData.deviceType === 2"
|
||||
label="联网方式"
|
||||
prop="netType"
|
||||
>
|
||||
<el-select
|
||||
v-model="formData.netType"
|
||||
placeholder="请选择联网方式"
|
||||
:disabled="formType === 'update'"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_NET_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="formData.deviceType === 1" label="接入网关协议" prop="protocolType">
|
||||
<el-select
|
||||
v-model="formData.protocolType"
|
||||
placeholder="请选择接入网关协议"
|
||||
:disabled="formType === 'update'"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PROTOCOL_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="数据格式" prop="dataFormat">
|
||||
<el-select
|
||||
v-model="formData.dataFormat"
|
||||
placeholder="请选择接数据格式"
|
||||
:disabled="formType === 'update'"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DATA_FORMAT)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="数据校验级别" prop="validateType">
|
||||
<el-radio-group v-model="formData.validateType" :disabled="formType === 'update'">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_VALIDATE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="产品描述" prop="description">
|
||||
<el-input type="textarea" v-model="formData.description" placeholder="请输入产品描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ProductApi, ProductVO } from '@/api/iot/product'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
|
||||
defineOptions({ name: 'IoTProductForm' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const formLoading = ref(false)
|
||||
const formType = ref('')
|
||||
const formData = ref({
|
||||
name: undefined,
|
||||
id: undefined,
|
||||
productKey: undefined,
|
||||
protocolId: undefined,
|
||||
categoryId: undefined,
|
||||
description: undefined,
|
||||
validateType: undefined,
|
||||
status: undefined,
|
||||
deviceType: undefined,
|
||||
netType: undefined,
|
||||
protocolType: undefined,
|
||||
dataFormat: undefined
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
|
||||
deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
|
||||
netType: [
|
||||
{
|
||||
// TODO @haohao：0、1、/2 最好前端也枚举下；另外，这里的 required 可以直接设置为 true。然后表单那些 v-if。只要不存在，它自动就不校验了哈
|
||||
required: formData.deviceType === 0 || formData.deviceType === 2,
|
||||
message: '联网方式不能为空',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
protocolType: [
|
||||
{ required: formData.deviceType === 1, message: '接入网关协议不能为空', trigger: 'change' }
|
||||
],
|
||||
dataFormat: [{ required: true, message: '数据格式不能为空', trigger: 'change' }],
|
||||
validateType: [{ required: true, message: '数据校验级别不能为空', trigger: 'change' }]
|
||||
})
|
||||
const formRef = ref()
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await ProductApi.getProduct(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open, close: () => (dialogVisible.value = false) })
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success'])
|
||||
const submitForm = async () => {
|
||||
await formRef.value.validate()
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as ProductVO
|
||||
if (formType.value === 'create') {
|
||||
await ProductApi.createProduct(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await ProductApi.updateProduct(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false // 确保关闭弹框
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
name: undefined,
|
||||
id: undefined,
|
||||
productKey: undefined,
|
||||
protocolId: undefined,
|
||||
categoryId: undefined,
|
||||
description: undefined,
|
||||
validateType: undefined,
|
||||
status: undefined,
|
||||
deviceType: undefined,
|
||||
netType: undefined,
|
||||
protocolType: undefined,
|
||||
dataFormat: undefined
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
103
src/views/iot/product/detail/ProductDetailsHeader.vue
Normal file
103
src/views/iot/product/detail/ProductDetailsHeader.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<span class="text-xl font-bold">{{ product.name }}</span>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 右上：按钮 -->
|
||||
<el-button
|
||||
@click="openForm('update', product.id)"
|
||||
v-hasPermi="['iot:product:update']"
|
||||
v-if="product.status === 0"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="confirmPublish(product.id)"
|
||||
v-hasPermi="['iot:product:update']"
|
||||
v-if="product.status === 0"
|
||||
>
|
||||
发布
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
@click="confirmUnpublish(product.id)"
|
||||
v-hasPermi="['iot:product:update']"
|
||||
v-if="product.status === 1"
|
||||
>
|
||||
撤销发布
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContentWrap class="mt-10px">
|
||||
<el-descriptions :column="5" direction="horizontal">
|
||||
<el-descriptions-item label="ProductKey">
|
||||
{{ product.productKey }}
|
||||
<el-button @click="copyToClipboard(product.productKey)">复制</el-button>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="5" direction="horizontal">
|
||||
<el-descriptions-item label="设备数">
|
||||
{{ product.deviceCount }}
|
||||
<el-button @click="goToManagement(product.id)">前往管理</el-button>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</ContentWrap>
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<ProductForm ref="formRef" @success="emit('refresh')" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import ProductForm from '@/views/iot/product/ProductForm.vue'
|
||||
import { ProductApi, ProductVO } from '@/api/iot/product'
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const { product } = defineProps<{ product: ProductVO }>() // 定义 Props
|
||||
|
||||
/** 处理复制 */
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
message.success('复制成功')
|
||||
})
|
||||
}
|
||||
|
||||
/** 路由跳转到设备管理 */
|
||||
const { push } = useRouter()
|
||||
const goToManagement = (productId: string) => {
|
||||
push({ name: 'IoTDevice', query: { productId } })
|
||||
}
|
||||
|
||||
/** 操作修改 */
|
||||
const emit = defineEmits(['refresh']) // 定义 Emits
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
const confirmPublish = async (id: number) => {
|
||||
try {
|
||||
await ProductApi.updateProductStatus(id, 1)
|
||||
message.success('发布成功')
|
||||
formRef.value.close() // 关闭弹框
|
||||
emit('refresh')
|
||||
} catch (error) {
|
||||
message.error('发布失败')
|
||||
}
|
||||
}
|
||||
const confirmUnpublish = async (id: number) => {
|
||||
try {
|
||||
await ProductApi.updateProductStatus(id, 0)
|
||||
message.success('撤销发布成功')
|
||||
formRef.value.close() // 关闭弹框
|
||||
emit('refresh')
|
||||
} catch (error) {
|
||||
message.error('撤销发布失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
44
src/views/iot/product/detail/ProductDetailsInfo.vue
Normal file
44
src/views/iot/product/detail/ProductDetailsInfo.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-descriptions :column="3" title="产品信息">
|
||||
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备类型">
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">
|
||||
{{ formatDate(product.createTime) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="数据格式">
|
||||
<dict-tag :type="DICT_TYPE.IOT_DATA_FORMAT" :value="product.dataFormat" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="数据校验级别">
|
||||
<dict-tag :type="DICT_TYPE.IOT_VALIDATE_TYPE" :value="product.validateType" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="产品状态">
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
label="联网方式"
|
||||
v-if="product.deviceType === 0 || product.deviceType === 2"
|
||||
>
|
||||
<dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接入网关协议" v-if="product.deviceType === 1">
|
||||
<dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-collapse>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { ProductVO } from '@/api/iot/product'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
|
||||
const { product } = defineProps<{ product: ProductVO }>()
|
||||
|
||||
// 展示的折叠面板
|
||||
const activeNames = ref(['basicInfo'])
|
||||
</script>
|
||||
243
src/views/iot/product/detail/ProductTopic.vue
Normal file
243
src/views/iot/product/detail/ProductTopic.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-tabs>
|
||||
<el-tab-pane label="基础通信 Topic">
|
||||
<Table
|
||||
:columns="columns1"
|
||||
:data="data1"
|
||||
:span-method="createSpanMethod(data1)"
|
||||
align="left"
|
||||
headerAlign="left"
|
||||
border="true"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="物模型通信 Topic">
|
||||
<Table
|
||||
:columns="columns2"
|
||||
:data="data2"
|
||||
:span-method="createSpanMethod(data2)"
|
||||
align="left"
|
||||
headerAlign="left"
|
||||
border="true"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ProductVO } from '@/api/iot/product'
|
||||
|
||||
const props = defineProps<{ product: ProductVO }>()
|
||||
|
||||
// 定义列
|
||||
const columns1 = reactive([
|
||||
{ label: '功能', field: 'function', width: 150 },
|
||||
{ label: 'Topic 类', field: 'topicClass', width: 800 },
|
||||
{ label: '操作权限', field: 'operationPermission', width: 100 },
|
||||
{ label: '描述', field: 'description' }
|
||||
])
|
||||
|
||||
const columns2 = reactive([
|
||||
{ label: '功能', field: 'function', width: 150 },
|
||||
{ label: 'Topic 类', field: 'topicClass', width: 800 },
|
||||
{ label: '操作权限', field: 'operationPermission', width: 100 },
|
||||
{ label: '描述', field: 'description' }
|
||||
])
|
||||
|
||||
// TODO @haohao：这个，有没可能写到一个枚举里，方便后续维护？ /Users/yunai/Java/yudao-ui-admin-vue3/src/views/ai/utils/constants.ts
|
||||
const data1 = computed(() => {
|
||||
if (!props.product || !props.product.productKey) return []
|
||||
return [
|
||||
{
|
||||
function: 'OTA 升级',
|
||||
topicClass: `/ota/device/inform/${props.product.productKey}/\${deviceName}`,
|
||||
operationPermission: '发布',
|
||||
description: '设备上报固件升级信息'
|
||||
},
|
||||
{
|
||||
function: 'OTA 升级',
|
||||
topicClass: `/ota/device/upgrade/${props.product.productKey}/\${deviceName}`,
|
||||
operationPermission: '订阅',
|
||||
description: '固件升级信息下行'
|
||||
},
|
||||
{
|
||||
function: 'OTA 升级',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/ota/firmware/get`,
|
||||
operationPermission: '发布',
|
||||
description: '设备上报固件升级进度'
|
||||
},
|
||||
{
|
||||
function: 'OTA 升级',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/ota/firmware/get`,
|
||||
operationPermission: '发布',
|
||||
description: '设备主动拉取固件升级信息'
|
||||
},
|
||||
{
|
||||
function: '设备标签',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/update`,
|
||||
operationPermission: '发布',
|
||||
description: '设备上报标签数据'
|
||||
},
|
||||
{
|
||||
function: '设备标签',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/update_reply`,
|
||||
operationPermission: '订阅',
|
||||
description: '云端响应标签上报'
|
||||
},
|
||||
{
|
||||
function: '设备标签',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/delete`,
|
||||
operationPermission: '订阅',
|
||||
description: '设备删除标签信息'
|
||||
},
|
||||
{
|
||||
function: '设备标签',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/delete_reply`,
|
||||
operationPermission: '订阅',
|
||||
description: '云端响应标签删除'
|
||||
},
|
||||
{
|
||||
function: '时钟同步',
|
||||
topicClass: `/ext/ntp/${props.product.productKey}/\${deviceName}/request`,
|
||||
operationPermission: '发布',
|
||||
description: 'NTP 时钟同步请求'
|
||||
},
|
||||
{
|
||||
function: '时钟同步',
|
||||
topicClass: `/ext/ntp/${props.product.productKey}/\${deviceName}/response`,
|
||||
operationPermission: '订阅',
|
||||
description: 'NTP 时钟同步响应'
|
||||
},
|
||||
{
|
||||
function: '设备影子',
|
||||
topicClass: `/shadow/update/${props.product.productKey}/\${deviceName}`,
|
||||
operationPermission: '发布',
|
||||
description: '设备影子发布'
|
||||
},
|
||||
{
|
||||
function: '设备影子',
|
||||
topicClass: `/shadow/get/${props.product.productKey}/\${deviceName}`,
|
||||
operationPermission: '订阅',
|
||||
description: '设备接收影子变更'
|
||||
},
|
||||
{
|
||||
function: '配置更新',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/config/push`,
|
||||
operationPermission: '订阅',
|
||||
description: '云端主动下推配置信息'
|
||||
},
|
||||
{
|
||||
function: '配置更新',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/config/get`,
|
||||
operationPermission: '发布',
|
||||
description: '设备端查询配置信息'
|
||||
},
|
||||
{
|
||||
function: '配置更新',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/config/get_reply`,
|
||||
operationPermission: '订阅',
|
||||
description: '云端响应配置信息'
|
||||
},
|
||||
{
|
||||
function: '广播',
|
||||
topicClass: `/broadcast/${props.product.productKey}/\${identifier}`,
|
||||
operationPermission: '订阅',
|
||||
description: '广播 Topic，identifier 为用户自定义字符串'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const data2 = computed(() => {
|
||||
if (!props.product || !props.product.productKey) return []
|
||||
return [
|
||||
{
|
||||
function: '属性上报',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/property/post`,
|
||||
operationPermission: '发布',
|
||||
description: '设备属性上报'
|
||||
},
|
||||
{
|
||||
function: '属性上报',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/property/post_reply`,
|
||||
operationPermission: '订阅',
|
||||
description: '云端响应属性上报'
|
||||
},
|
||||
{
|
||||
function: '属性设置',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/service/property/set`,
|
||||
operationPermission: '订阅',
|
||||
description: '设备属性设置'
|
||||
},
|
||||
{
|
||||
function: '事件上报',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/\${tsl.event.identifier}/post`,
|
||||
operationPermission: '发布',
|
||||
description: '设备事件上报'
|
||||
},
|
||||
{
|
||||
function: '事件上报',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/\${tsl.event.identifier}/post_reply`,
|
||||
operationPermission: '订阅',
|
||||
description: '云端响应事件上报'
|
||||
},
|
||||
{
|
||||
function: '服务调用',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/service/\${tsl.service.identifier}`,
|
||||
operationPermission: '订阅',
|
||||
description: '设备服务调用'
|
||||
},
|
||||
{
|
||||
function: '服务调用',
|
||||
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/service/\${tsl.service.identifier}_reply`,
|
||||
operationPermission: '发布',
|
||||
description: '设备端响应服务调用'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 通用的单元格合并方法生成器
|
||||
const createSpanMethod = (data: any[]) => {
|
||||
// 预处理，计算每个功能的合并行数
|
||||
const rowspanMap: Record<number, number> = {}
|
||||
let currentFunction = ''
|
||||
let startIndex = 0
|
||||
let count = 0
|
||||
|
||||
data.forEach((item, index) => {
|
||||
if (item.function !== currentFunction) {
|
||||
if (count > 0) {
|
||||
rowspanMap[startIndex] = count
|
||||
}
|
||||
currentFunction = item.function
|
||||
startIndex = index
|
||||
count = 1
|
||||
} else {
|
||||
count++
|
||||
}
|
||||
})
|
||||
|
||||
// 处理最后一组
|
||||
if (count > 0) {
|
||||
rowspanMap[startIndex] = count
|
||||
}
|
||||
|
||||
// 返回 span 方法
|
||||
return ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
|
||||
if (columnIndex === 0) {
|
||||
// 仅对“功能”列进行合并
|
||||
const rowspan = rowspanMap[rowIndex] || 0
|
||||
if (rowspan > 0) {
|
||||
return {
|
||||
rowspan,
|
||||
colspan: 1
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
154
src/views/iot/product/detail/ThinkModelFunction.vue
Normal file
154
src/views/iot/product/detail/ThinkModelFunction.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="功能类型" prop="name">
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
placeholder="请选择功能类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_FUNCTION_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['iot:think-model-function:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 添加功能
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
<ContentWrap>
|
||||
<el-tabs>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="功能类型" align="center" prop="type">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_FUNCTION_TYPE" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="功能名称" align="center" prop="name" />
|
||||
<el-table-column label="标识符" align="center" prop="identifier" />
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="[`iot:think-model-function:update`]"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['iot:think-model-function:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-tabs>
|
||||
</ContentWrap>
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<ThinkModelFunctionForm ref="formRef" :product="product" @success="getList" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ProductVO } from '@/api/iot/product'
|
||||
import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import ThinkModelFunctionForm from '@/views/iot/product/detail/ThinkModelFunctionForm.vue'
|
||||
|
||||
const props = defineProps<{ product: ProductVO }>()
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<ThinkModelFunctionVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
type: undefined,
|
||||
productId: -1
|
||||
})
|
||||
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
queryParams.productId = props.product.id
|
||||
const data = await ThinkModelFunctionApi.getThinkModelFunctionPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
queryParams.type = undefined
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await ThinkModelFunctionApi.deleteThinkModelFunction(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
229
src/views/iot/product/detail/ThinkModelFunctionForm.vue
Normal file
229
src/views/iot/product/detail/ThinkModelFunctionForm.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="功能类型" prop="type">
|
||||
<el-radio-group v-model="formData.type">
|
||||
<el-radio-button value="1"> 属性 </el-radio-button>
|
||||
<el-radio-button value="2"> 服务 </el-radio-button>
|
||||
<el-radio-button value="3"> 事件 </el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="功能名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入功能名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标识符" prop="identifier">
|
||||
<el-input
|
||||
v-model="formData.identifier"
|
||||
placeholder="请输入标识符"
|
||||
:disabled="formType === 'update'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据类型" prop="type">
|
||||
<el-select
|
||||
v-model="formData.property.dataType.type"
|
||||
placeholder="请选择数据类型"
|
||||
:disabled="formType === 'update'"
|
||||
>
|
||||
<el-option key="int" label="int32 (整数型)" value="int" />
|
||||
<el-option key="float" label="float (单精度浮点型)" value="float" />
|
||||
<el-option key="double" label="double (双精度浮点型)" value="double" />
|
||||
<!-- <el-option key="text" label="text (文本型)" value="text" />-->
|
||||
<!-- <el-option key="date" label="date (日期型)" value="date" />-->
|
||||
<!-- <el-option key="bool" label="bool (布尔型)" value="bool" />-->
|
||||
<!-- <el-option key="enum" label="enum (枚举型)" value="enum" />-->
|
||||
<!-- <el-option key="struct" label="struct (结构体)" value="struct" />-->
|
||||
<!-- <el-option key="array" label="array (数组)" value="array" />-->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="取值范围" prop="max">
|
||||
<el-input v-model="formData.property.dataType.specs.min" placeholder="请输入最小值" />
|
||||
<span class="mx-2">~</span>
|
||||
<el-input v-model="formData.property.dataType.specs.max" placeholder="请输入最大值" />
|
||||
</el-form-item>
|
||||
<el-form-item label="步长" prop="step">
|
||||
<el-input v-model="formData.property.dataType.specs.step" placeholder="请输入步长" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="formData.property.dataType.specs.unit" placeholder="请输入单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="读写类型" prop="accessMode">
|
||||
<el-radio-group v-model="formData.property.accessMode">
|
||||
<el-radio label="rw">读写</el-radio>
|
||||
<el-radio label="r">只读</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="属性描述" prop="property.description">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData.property.description"
|
||||
placeholder="请输入属性描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ProductVO } from '@/api/iot/product'
|
||||
import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
|
||||
|
||||
const props = defineProps<{ product: ProductVO }>()
|
||||
|
||||
defineOptions({ name: 'ThinkModelFunctionForm' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const formLoading = ref(false)
|
||||
const formType = ref('')
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
productId: undefined,
|
||||
productKey: undefined,
|
||||
identifier: undefined,
|
||||
name: undefined,
|
||||
description: undefined,
|
||||
type: '1',
|
||||
property: {
|
||||
identifier: undefined,
|
||||
name: undefined,
|
||||
accessMode: 'rw',
|
||||
required: true,
|
||||
dataType: {
|
||||
type: undefined,
|
||||
specs: {
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
step: undefined,
|
||||
unit: undefined
|
||||
}
|
||||
},
|
||||
description: undefined // 添加这一行
|
||||
}
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '功能名称不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[\u4e00-\u9fa5a-zA-Z0-9][\u4e00-\u9fa5a-zA-Z0-9\-_/\.]{0,29}$/,
|
||||
message:
|
||||
'支持中文、大小写字母、日文、数字、短划线、下划线、斜杠和小数点，必须以中文、英文或数字开头，不超过 30 个字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
type: [{ required: true, message: '功能类型不能为空', trigger: 'blur' }],
|
||||
identifier: [
|
||||
{ required: true, message: '标识符不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[a-zA-Z0-9_]{1,50}$/,
|
||||
message: '支持大小写字母、数字和下划线，不超过 50 个字符',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
const reservedKeywords = ['set', 'get', 'post', 'property', 'event', 'time', 'value']
|
||||
if (reservedKeywords.includes(value)) {
|
||||
callback(
|
||||
new Error(
|
||||
'set, get, post, property, event, time, value 是系统保留字段，不能用于标识符定义'
|
||||
)
|
||||
)
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
property: {
|
||||
dataType: {
|
||||
type: [{ required: true, message: '数据类型不能为空', trigger: 'blur' }]
|
||||
},
|
||||
accessMode: [{ required: true, message: '读写类型不能为空', trigger: 'blur' }]
|
||||
}
|
||||
})
|
||||
const formRef = ref()
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await ThinkModelFunctionApi.getThinkModelFunction(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open, close: () => (dialogVisible.value = false) })
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success'])
|
||||
const submitForm = async () => {
|
||||
await formRef.value.validate()
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as ThinkModelFunctionVO
|
||||
data.productId = props.product.id
|
||||
data.productKey = props.product.productKey
|
||||
if (formType.value === 'create') {
|
||||
await ThinkModelFunctionApi.createThinkModelFunction(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await ThinkModelFunctionApi.updateThinkModelFunction(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false // 确保关闭弹框
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
productId: undefined,
|
||||
productKey: undefined,
|
||||
identifier: undefined,
|
||||
name: undefined,
|
||||
description: undefined,
|
||||
type: '1', // todo @HAOHAO：看看枚举下
|
||||
property: {
|
||||
identifier: undefined,
|
||||
name: undefined,
|
||||
accessMode: 'rw',
|
||||
required: true,
|
||||
dataType: {
|
||||
type: undefined,
|
||||
specs: {
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
step: undefined,
|
||||
unit: undefined
|
||||
}
|
||||
},
|
||||
description: undefined // 确保重置 description 字段
|
||||
}
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
80
src/views/iot/product/detail/index.vue
Normal file
80
src/views/iot/product/detail/index.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<ProductDetailsHeader :loading="loading" :product="product" @refresh="() => getProductData(id)" />
|
||||
<el-col>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="产品信息" name="info">
|
||||
<ProductDetailsInfo v-if="activeTab === 'info'" :product="product" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Topic 类列表" name="topic">
|
||||
<ProductTopic v-if="activeTab === 'topic'" :product="product" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="功能定义" name="function">
|
||||
<ThinkModelFunction v-if="activeTab === 'function'" :product="product" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="消息解析" name="message" />
|
||||
<el-tab-pane label="服务端订阅" name="subscription" />
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ProductApi, ProductVO } from '@/api/iot/product'
|
||||
import { DeviceApi } from '@/api/iot/device'
|
||||
import ProductDetailsHeader from '@/views/iot/product/detail/ProductDetailsHeader.vue'
|
||||
import ProductDetailsInfo from '@/views/iot/product/detail/ProductDetailsInfo.vue'
|
||||
import ProductTopic from '@/views/iot/product/detail/ProductTopic.vue'
|
||||
import ThinkModelFunction from '@/views/iot/product/detail/ThinkModelFunction.vue'
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
defineOptions({ name: 'IoTProductDetail' })
|
||||
|
||||
const { delView } = useTagsViewStore() // 视图操作
|
||||
const { currentRoute } = useRouter()
|
||||
|
||||
const route = useRoute()
|
||||
const message = useMessage()
|
||||
const id = Number(route.params.id) // 编号
|
||||
const loading = ref(true) // 加载中
|
||||
const product = ref<ProductVO>({} as ProductVO) // 详情
|
||||
const activeTab = ref('info') // 默认激活的标签页
|
||||
|
||||
/** 获取详情 */
|
||||
const getProductData = async (id: number) => {
|
||||
loading.value = true
|
||||
try {
|
||||
product.value = await ProductApi.getProduct(id)
|
||||
console.log('Product data:', product.value)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 查询设备数量
|
||||
const getDeviceCount = async (productId: number) => {
|
||||
try {
|
||||
const count = await DeviceApi.getDeviceCount(productId)
|
||||
console.log('Device count response:', count)
|
||||
return count
|
||||
} catch (error) {
|
||||
console.error('Error fetching device count:', error)
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
if (!id) {
|
||||
message.warning('参数错误，产品不能为空！')
|
||||
delView(unref(currentRoute))
|
||||
return
|
||||
}
|
||||
await getProductData(id)
|
||||
// 查询设备数量
|
||||
if (product.value.id) {
|
||||
product.value.deviceCount = await getDeviceCount(product.value.id)
|
||||
console.log('Device count:', product.value.deviceCount)
|
||||
} else {
|
||||
console.error('Product ID is undefined')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
191
src/views/iot/product/index.vue
Normal file
191
src/views/iot/product/index.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入产品名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="ProductKey" prop="productKey">
|
||||
<el-input
|
||||
v-model="queryParams.productKey"
|
||||
placeholder="请输入产品标识"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['iot:product:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="产品名称" align="center" prop="name">
|
||||
<template #default="scope">
|
||||
<el-link @click="openDetail(scope.row.id)">{{ scope.row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="ProductKey" align="center" prop="productKey" />
|
||||
<el-table-column label="设备类型" align="center" prop="deviceType">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="产品状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openDetail(scope.row.id)"
|
||||
v-hasPermi="['iot:product:query']"
|
||||
>
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['iot:product:delete']"
|
||||
:disabled="scope.row.status === 1"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<ProductForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { ProductApi, ProductVO } from '@/api/iot/product'
|
||||
import ProductForm from './ProductForm.vue'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
|
||||
/** iot 产品 列表 */
|
||||
defineOptions({ name: 'IoTProduct' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<ProductVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
createTime: [],
|
||||
productKey: undefined,
|
||||
protocolId: undefined,
|
||||
categoryId: undefined,
|
||||
description: undefined,
|
||||
validateType: undefined,
|
||||
status: undefined,
|
||||
deviceType: undefined,
|
||||
netType: undefined,
|
||||
protocolType: undefined,
|
||||
dataFormat: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await ProductApi.getProductPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 打开详情 */
|
||||
const { push } = useRouter()
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'IoTProductDetail', params: { id } })
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await ProductApi.deleteProduct(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
151
src/views/knowledge/dataset-form/form-step1.vue
Normal file
151
src/views/knowledge/dataset-form/form-step1.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<!-- 标题 -->
|
||||
<div class="title">
|
||||
<div>选择数据源</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据源选择 -->
|
||||
<div class="resource-btn" >导入已有文本</div>
|
||||
|
||||
<!-- 上传文件区域 -->
|
||||
<el-form>
|
||||
<div class="upload-section">
|
||||
<div class="upload-label">上传文本文件</div>
|
||||
<el-upload
|
||||
class="upload-area"
|
||||
action="#"
|
||||
:file-list="fileList"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="beforeUpload"
|
||||
list-type="text"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">拖拽文件至此，或者 <em>选择文件</em></div>
|
||||
<div class="el-upload__tip">
|
||||
已支持 TXT、MARKDOWN、PDF、HTML、XLSX、XLS、DOCX、CSV、EML、MSG、PPTX、PPT、XML、EPUB，每个文件不超过 15MB。
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
|
||||
<!-- 下一步按钮 -->
|
||||
<div class="next-button">
|
||||
<el-button type="primary" :disabled="!fileList.length">下一步</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<!-- 知识库创建 -->
|
||||
<div class="create-knowledge">
|
||||
<el-link type="primary" underline>创建一个空知识库</el-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const fileList = ref([])
|
||||
|
||||
const handleRemove = (file, fileList) => {
|
||||
console.log(file, fileList)
|
||||
}
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
fileList.value.push(file)
|
||||
return false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upload-container {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.resource-btn {
|
||||
margin-top: 20px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
width: 150px;
|
||||
border: 1.5px solid #528bff;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
color: #101828;
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
margin: 20px 0;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.upload-label {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
margin-top: 10px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.el-upload__text em {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-upload__tip {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.next-button {
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.create-knowledge {
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.source-radio-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-radio-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.el-radio-button .el-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
168
src/views/knowledge/dataset-form/form-step2.vue
Normal file
168
src/views/knowledge/dataset-form/form-step2.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<!-- Left Section -->
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<!-- 分段设置 -->
|
||||
<el-form>
|
||||
<el-form-item label="分段设置">
|
||||
<el-radio-group v-model="segmentSetting">
|
||||
<el-radio label="自动分段与清洗">自动分段与清洗</el-radio>
|
||||
<el-radio label="自定义">自定义</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 索引方式 -->
|
||||
<el-form-item label="索引方式">
|
||||
<el-radio-group v-model="indexingMethod">
|
||||
<el-radio label="高质量">高质量</el-radio>
|
||||
<el-radio label="经济">经济</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- Embedding 模型 -->
|
||||
<el-form-item label="Embedding 模型">
|
||||
<el-select v-model="embeddingModel" placeholder="Select Embedding Model">
|
||||
<el-option label="text-embedding-3-large" value="text-embedding-3-large"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 检索设置 -->
|
||||
<el-form-item label="检索设置">
|
||||
<el-card style="width: 400px;">
|
||||
<div class="card-header">
|
||||
<span>向量检索</span>
|
||||
</div>
|
||||
<el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
|
||||
<el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
|
||||
</el-card>
|
||||
|
||||
<el-card style="width: 400px;">
|
||||
<div class="card-header">
|
||||
<span>全文检索</span>
|
||||
</div>
|
||||
<el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
|
||||
<el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
|
||||
</el-card>
|
||||
|
||||
<el-card style="width: 400px;">
|
||||
<div class="card-header">
|
||||
<span>混合检索</span>
|
||||
</div>
|
||||
<el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
|
||||
<el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
|
||||
</el-card>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- Right Section: 分段预览 -->
|
||||
<el-col :span="9">
|
||||
<el-card shadow="never">
|
||||
<div class="previews-title">分段预览</div>
|
||||
<template v-for="(segment, index) in segmentPreviews" :key="index">
|
||||
<div class="segment-preview">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.74999 1.5L3.24999 10.5M8.74998 1.5L7.24998 10.5M10.25 4H1.75M9.75 8H1.25"
|
||||
stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="id">{{ segment.number }}</span>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4 3.5H8M6 3.5V8.5M3.9 10.5H8.1C8.94008 10.5 9.36012 10.5 9.68099 10.3365C9.96323 10.1927 10.1927 9.96323 10.3365 9.68099C10.5 9.36012 10.5 8.94008 10.5 8.1V3.9C10.5 3.05992 10.5 2.63988 10.3365 2.31901C10.1927 2.03677 9.96323 1.8073 9.68099 1.66349C9.36012 1.5 8.94008 1.5 8.1 1.5H3.9C3.05992 1.5 2.63988 1.5 2.31901 1.66349C2.03677 1.8073 1.8073 2.03677 1.66349 2.31901C1.5 2.63988 1.5 3.05992 1.5 3.9V8.1C1.5 8.94008 1.5 9.36012 1.66349 9.68099C1.8073 9.96323 2.03677 10.1927 2.31901 10.3365C2.63988 10.5 3.05992 10.5 3.9 10.5Z"
|
||||
stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="char-size">7777 字符</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">{{ segment.text }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
|
||||
// Reactive variables for form control
|
||||
const segmentSetting = ref('自动分段与清洗');
|
||||
const indexingMethod = ref('高质量');
|
||||
const embeddingModel = ref('text-embedding-3-large');
|
||||
const directionalSearch = ref(true);
|
||||
const topK = ref(3);
|
||||
const scoreThreshold = ref(0.5);
|
||||
|
||||
// Mock data for segment previews
|
||||
const segmentPreviews = ref([
|
||||
{number: '001', text: "同步obs模型...'UAE-large-V1'"},
|
||||
{number: '002', text: "同步obs模型...'plip'"},
|
||||
{number: '003', text: "同步obs模型...'phoBERT-base-v2'"},
|
||||
{number: '004', text: "同步obs模型...'lama3-bb-bnb-4bit'"},
|
||||
{number: '005', text: "同步obs模型...'t5-base-split-and-rephrase'"}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* Add any custom styles here */
|
||||
|
||||
.previews-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.segment-preview {
|
||||
background-color: rgba(228, 228, 228, 0.38);
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin-top: 15px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
border-right: 5px;
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
color: #676767;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
.id {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.char-size {
|
||||
margin-left: 5px;
|
||||
font-size: 13px;
|
||||
color: rgba(57, 57, 57, 0.66);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
src/views/knowledge/dataset.vue
Normal file
152
src/views/knowledge/dataset.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="knowledge-base-container">
|
||||
<div class="card-container">
|
||||
<el-card class="create-card" shadow="hover">
|
||||
<div class="create-content">
|
||||
<el-icon class="create-icon"><Plus /></el-icon>
|
||||
<span class="create-text">创建知识库</span>
|
||||
</div>
|
||||
<div class="create-footer">
|
||||
导入您自己的文本数据或通过 Webhook 实时写入数据以增强 LLM 的上下文。
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="document-card" shadow="hover" v-for="index in 4" :key="index">
|
||||
<div class="document-header">
|
||||
<el-icon><Folder /></el-icon>
|
||||
<span>接口鉴权示例代码.md</span>
|
||||
</div>
|
||||
<div class="document-info">
|
||||
<el-tag size="small">1 文档</el-tag>
|
||||
<el-tag size="small" type="info">5 千字符</el-tag>
|
||||
<el-tag size="small" type="warning">0 关联应用</el-tag>
|
||||
</div>
|
||||
<p class="document-description">
|
||||
useful for when you want to answer queries about the 接口鉴权示例代码.md
|
||||
</p>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:small="false"
|
||||
:disabled="false"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Folder, Plus } from '@element-plus/icons-vue'
|
||||
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(100) // 假设总共有100条数据
|
||||
|
||||
const handleSizeChange = (val) => {
|
||||
console.log(`每页 ${val} 条`)
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
console.log(`当前页: ${val}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.knowledge-base-container {
|
||||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
position: absolute;
|
||||
padding: 20px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
bottom: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* Enable wrapping */
|
||||
gap: 20px;
|
||||
margin-bottom: auto; /* Pushes pagination to the bottom */
|
||||
}
|
||||
|
||||
.create-card, .document-card {
|
||||
flex: 1 1 360px; /* Allow cards to grow and shrink */
|
||||
min-width: 0;
|
||||
max-width: 400px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.create-card {
|
||||
background-color: rgba(168, 168, 168, 0.22);
|
||||
}
|
||||
.create-card:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.create-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.create-icon {
|
||||
font-size: 24px;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.create-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.create-footer {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.document-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.document-info {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.document-description {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -105,7 +105,7 @@ const list = ref([]) // 列表的数据
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
propertyId: Number(params.propertyId),
|
||||
propertyId: params.propertyId,
|
||||
name: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
@@ -180,17 +180,17 @@
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="销售价(元)" min-width="80">
|
||||
<template #default="{ row }">
|
||||
{{ formatToFraction(row.price) }}
|
||||
{{ row.price }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="市场价(元)" min-width="80">
|
||||
<template #default="{ row }">
|
||||
{{ formatToFraction(row.marketPrice) }}
|
||||
{{ row.marketPrice }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="成本价(元)" min-width="80">
|
||||
<template #default="{ row }">
|
||||
{{ formatToFraction(row.costPrice) }}
|
||||
{{ row.costPrice }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="库存" min-width="80">
|
||||
@@ -211,12 +211,12 @@
|
||||
<template v-if="formData!.subCommissionType">
|
||||
<el-table-column align="center" label="一级返佣(元)" min-width="80">
|
||||
<template #default="{ row }">
|
||||
{{ formatToFraction(row.firstBrokeragePrice) }}
|
||||
{{ row.firstBrokeragePrice }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="二级返佣(元)" min-width="80">
|
||||
<template #default="{ row }">
|
||||
{{ formatToFraction(row.secondBrokeragePrice) }}
|
||||
{{ row.secondBrokeragePrice }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
:show-word-limit="true"
|
||||
class="w-80!"
|
||||
maxlength="128"
|
||||
placeholder="请输入商品名称"
|
||||
placeholder="请输入商品简介"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
@@ -4,27 +4,27 @@
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入活动名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入活动名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择活动状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请选择活动状态"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
@@ -35,15 +35,22 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['promotion:combination-activity:create']"
|
||||
plain
|
||||
type="primary"
|
||||
@click="openForm('create')"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@@ -51,77 +58,77 @@
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="活动编号" prop="id" min-width="80" />
|
||||
<el-table-column label="活动名称" prop="name" min-width="140" />
|
||||
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
|
||||
<el-table-column label="活动编号" min-width="80" prop="id" />
|
||||
<el-table-column label="活动名称" min-width="140" prop="name" />
|
||||
<el-table-column label="活动时间" min-width="210">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
|
||||
~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品图片" prop="spuName" min-width="80">
|
||||
<el-table-column label="商品图片" min-width="80" prop="spuName">
|
||||
<template #default="scope">
|
||||
<el-image
|
||||
:preview-src-list="[scope.row.picUrl]"
|
||||
:src="scope.row.picUrl"
|
||||
class="h-40px w-40px"
|
||||
:preview-src-list="[scope.row.picUrl]"
|
||||
preview-teleported
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品标题" prop="spuName" min-width="300" />
|
||||
<el-table-column label="商品标题" min-width="300" prop="spuName" />
|
||||
<el-table-column
|
||||
label="原价"
|
||||
prop="marketPrice"
|
||||
min-width="100"
|
||||
:formatter="fenToYuanFormat"
|
||||
label="原价"
|
||||
min-width="100"
|
||||
prop="marketPrice"
|
||||
/>
|
||||
<el-table-column label="拼团价" prop="seckillPrice" min-width="100">
|
||||
<el-table-column label="拼团价" min-width="100" prop="seckillPrice">
|
||||
<template #default="scope">
|
||||
{{ formatCombinationPrice(scope.row.products) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开团组数" prop="groupCount" min-width="100" />
|
||||
<el-table-column label="成团组数" prop="groupSuccessCount" min-width="100" />
|
||||
<el-table-column label="购买次数" prop="recordCount" min-width="100" />
|
||||
<el-table-column label="活动状态" align="center" prop="status" min-width="100">
|
||||
<el-table-column label="开团组数" min-width="100" prop="groupCount" />
|
||||
<el-table-column label="成团组数" min-width="100" prop="groupSuccessCount" />
|
||||
<el-table-column label="购买次数" min-width="100" prop="recordCount" />
|
||||
<el-table-column align="center" label="活动状态" min-width="100" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center" width="150px" fixed="right">
|
||||
<el-table-column align="center" fixed="right" label="操作" width="150px">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['promotion:combination-activity:update']"
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['promotion:combination-activity:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.status === 0"
|
||||
v-hasPermi="['promotion:combination-activity:close']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleClose(scope.row.id)"
|
||||
v-if="scope.row.status === 0"
|
||||
v-hasPermi="['promotion:combination-activity:close']"
|
||||
>
|
||||
关闭
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
v-hasPermi="['promotion:combination-activity:delete']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-else
|
||||
v-hasPermi="['promotion:combination-activity:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
@@ -130,9 +137,9 @@
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
@@ -141,12 +148,11 @@
|
||||
<CombinationActivityForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { dateFormatter, formatDate } from '@/utils/formatTime'
|
||||
import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
|
||||
import CombinationActivityForm from './CombinationActivityForm.vue'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { fenToYuanFormat } from '@/utils/formatter'
|
||||
import { fenToYuan } from '@/utils'
|
||||
|
||||
@@ -165,7 +171,6 @@ const queryParams = reactive({
|
||||
status: null
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
@@ -197,12 +202,11 @@ const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
// TODO 芋艿：这里要改下
|
||||
/** 关闭按钮操作 */
|
||||
const handleClose = async (id: number) => {
|
||||
try {
|
||||
// 关闭的二次确认
|
||||
await message.confirm('确认关闭该秒杀活动吗？')
|
||||
await message.confirm('确认关闭该拼团活动吗？')
|
||||
// 发起关闭
|
||||
await CombinationActivityApi.closeCombinationActivity(id)
|
||||
message.success('关闭成功')
|
||||
|
||||
@@ -30,13 +30,13 @@
|
||||
<el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
|
||||
<el-table-column align="center" label="库存" min-width="90" prop="stock" />
|
||||
<el-table-column
|
||||
v-if="spuData.length > 1 && isDelete"
|
||||
v-if="spuData.length > 1 && deletable"
|
||||
align="center"
|
||||
label="操作"
|
||||
min-width="90"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="deleteSpu(scope.row.id)"> 删除 </el-button>
|
||||
<el-button link type="primary" @click="deleteSpu(scope.row.id)"> 删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -56,13 +56,13 @@ const props = defineProps<{
|
||||
spuList: T[]
|
||||
ruleConfig: RuleConfig[]
|
||||
spuPropertyListP: SpuProperty<T>[]
|
||||
isDelete?: boolean // SPU 是否可删除；TODO deletable 换成这个名字好点。
|
||||
deletable?: boolean // SPU 是否可删除；
|
||||
}>()
|
||||
|
||||
const spuData = ref<Spu[]>([]) // spu 详情数据列表
|
||||
const skuListRef = ref() // 商品属性列表Ref
|
||||
const spuPropertyList = ref<SpuProperty<T>[]>([]) // spuId 对应的 sku 的属性列表
|
||||
const expandRowKeys = ref<number[]>() // 控制展开行需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
|
||||
const expandRowKeys = ref<string[]>([]) // 控制展开行需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
|
||||
|
||||
/**
|
||||
* 获取所有 sku 活动配置
|
||||
@@ -71,10 +71,10 @@ const expandRowKeys = ref<number[]>() // 控制展开行需要设置 row-key 属
|
||||
*/
|
||||
const getSkuConfigs = (extendedAttribute: string) => {
|
||||
skuListRef.value.validateSku()
|
||||
const seckillProducts = []
|
||||
const seckillProducts: any[] = []
|
||||
spuPropertyList.value.forEach((item) => {
|
||||
item.spuDetail.skus.forEach((sku) => {
|
||||
seckillProducts.push(sku[extendedAttribute])
|
||||
item.spuDetail.skus?.forEach((sku: any) => {
|
||||
seckillProducts.push(sku[extendedAttribute] as any)
|
||||
})
|
||||
})
|
||||
return seckillProducts
|
||||
@@ -124,10 +124,10 @@ watch(
|
||||
() => props.spuPropertyListP,
|
||||
(data) => {
|
||||
if (!data) return
|
||||
spuPropertyList.value = data as SpuProperty<T>[]
|
||||
spuPropertyList.value = data as SpuProperty<T>[] as any
|
||||
// 解决如果之前选择的是单规格 spu 的话后面选择多规格 sku 多规格属性信息不展示的问题。解决方法：让 SkuList 组件重新渲染（行折叠会干掉包含的组件展开时会重新加载）
|
||||
setTimeout(() => {
|
||||
expandRowKeys.value = data.map((item) => item.spuId)
|
||||
expandRowKeys.value = data.map((item) => item.spuId + '')
|
||||
}, 200)
|
||||
},
|
||||
{
|
||||
|
||||
@@ -116,6 +116,7 @@ import {
|
||||
validityTypeFormat
|
||||
} from '@/views/mall/promotion/coupon/formatter'
|
||||
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
|
||||
import { CouponTemplateTakeTypeEnum } from '@/utils/constants'
|
||||
|
||||
defineOptions({ name: 'CouponSelect' })
|
||||
|
||||
@@ -128,7 +129,7 @@ const emit = defineEmits<{
|
||||
(e: 'change', v: CouponTemplateApi.CouponTemplateVO[]): void
|
||||
}>()
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('选择优惠卷') // 弹窗的标题
|
||||
const dialogTitle = ref('选择优惠劵') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
@@ -138,7 +139,7 @@ const queryParams = reactive({
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
discountType: null,
|
||||
canTakeTypes: null
|
||||
canTakeTypes: [CouponTemplateTakeTypeEnum.USER.type] // 只获得直接领取的券
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const selectedCouponList = ref<CouponTemplateApi.CouponTemplateVO[]>([]) // 选择的数据
|
||||
|
||||
@@ -16,10 +16,14 @@ export const discountFormat = (row: CouponTemplateVO) => {
|
||||
|
||||
// 格式化【领取上限】
|
||||
export const takeLimitCountFormat = (row: CouponTemplateVO) => {
|
||||
if (row.takeLimitCount === -1) {
|
||||
return '无领取限制'
|
||||
if (row.takeLimitCount) {
|
||||
if (row.takeLimitCount === -1) {
|
||||
return '无领取限制'
|
||||
}
|
||||
return `${row.takeLimitCount} 张/人`
|
||||
} else {
|
||||
return ' '
|
||||
}
|
||||
return `${row.takeLimitCount} 张/人`
|
||||
}
|
||||
|
||||
// 格式化【有效期限】
|
||||
@@ -33,8 +37,19 @@ export const validityTypeFormat = (row: CouponTemplateVO) => {
|
||||
return '未知【' + row.validityType + '】'
|
||||
}
|
||||
|
||||
// 格式化【totalCount】
|
||||
export const totalCountFormat = (row: CouponTemplateVO) => {
|
||||
if (row.totalCount === -1) {
|
||||
return '不限制'
|
||||
}
|
||||
return row.totalCount
|
||||
}
|
||||
|
||||
// 格式化【剩余数量】
|
||||
export const remainedCountFormat = (row: CouponTemplateVO) => {
|
||||
if (row.totalCount === -1) {
|
||||
return '不限制'
|
||||
}
|
||||
return row.totalCount - row.takeCount
|
||||
}
|
||||
|
||||
|
||||
@@ -115,6 +115,7 @@
|
||||
<el-radio-group v-model="formData.takeType">
|
||||
<el-radio :key="1" :value="1">直接领取</el-radio>
|
||||
<el-radio :key="2" :value="2">指定发放</el-radio>
|
||||
<el-radio :key="2" :value="3">新人劵</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.takeType === 1" label="发放数量" prop="totalCount">
|
||||
@@ -309,7 +310,9 @@ const submitForm = async () => {
|
||||
validEndTime:
|
||||
formData.value.validTimes && formData.value.validTimes.length === 2
|
||||
? formData.value.validTimes[1]
|
||||
: undefined
|
||||
: undefined,
|
||||
totalCount: formData.value.takeType === 1 ? formData.value.totalCount : -1,
|
||||
takeLimitCount: formData.value.takeType === 1 ? formData.value.takeLimitCount : -1
|
||||
} as unknown as CouponTemplateApi.CouponTemplateVO
|
||||
|
||||
// 设置商品范围
|
||||
|
||||
@@ -109,7 +109,12 @@
|
||||
prop="validityType"
|
||||
width="185"
|
||||
/>
|
||||
<el-table-column align="center" label="发放数量" prop="totalCount" />
|
||||
<el-table-column
|
||||
:formatter="totalCountFormat"
|
||||
align="center"
|
||||
label="发放数量"
|
||||
prop="totalCount"
|
||||
/>
|
||||
<el-table-column
|
||||
:formatter="remainedCountFormat"
|
||||
align="center"
|
||||
@@ -189,6 +194,7 @@ import {
|
||||
discountFormat,
|
||||
remainedCountFormat,
|
||||
takeLimitCountFormat,
|
||||
totalCountFormat,
|
||||
validityTypeFormat
|
||||
} from '@/views/mall/promotion/coupon/formatter'
|
||||
|
||||
|
||||
@@ -8,28 +8,40 @@
|
||||
:schema="allSchemas.formSchema"
|
||||
>
|
||||
<!-- 先选择 -->
|
||||
<!-- TODO @zhangshuai：商品允许选择多个 -->
|
||||
<!-- TODO @zhangshuai：选择后的 SKU，需要后面加个【删除】按钮 -->
|
||||
<!-- TODO @zhangshuai：展示的金额，貌似不对，大了 100 倍，需要看下 -->
|
||||
<!-- TODO @zhangshuai：“优惠类型”，是每个 SKU 可以自定义已设置哈。因为每个商品 SKU 的折扣和减少价格，可能不同。具体交互，可以注册一个 youzan.com 看看；它的交互方式是，如果设置了“优惠金额”，则算“减价”；如果再次设置了“折扣百分比”，就算“打折”；这样形成一个互斥的优惠类型 -->
|
||||
<template #spuId>
|
||||
<el-button @click="spuSelectRef.open()">选择商品</el-button>
|
||||
<SpuAndSkuList
|
||||
ref="spuAndSkuListRef"
|
||||
:deletable="true"
|
||||
:rule-config="ruleConfig"
|
||||
:spu-list="spuList"
|
||||
:spu-property-list-p="spuPropertyList"
|
||||
:isDelete="true"
|
||||
@delete="deleteSpu"
|
||||
>
|
||||
<el-table-column align="center" label="优惠金额" min-width="168">
|
||||
<template #default="{ row: sku }">
|
||||
<el-input-number v-model="sku.productConfig.discountPrice" :min="0" class="w-100%" />
|
||||
<template #default="{ row }">
|
||||
<el-input-number
|
||||
v-model="row.productConfig.discountPrice"
|
||||
:max="parseFloat(fenToYuan(row.price))"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
class="w-100%"
|
||||
@change="handleSkuDiscountPriceChange(row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="折扣百分比(%)" min-width="168">
|
||||
<template #default="{ row: sku }">
|
||||
<el-input-number v-model="sku.productConfig.discountPercent" class="w-100%" />
|
||||
<template #default="{ row }">
|
||||
<el-input-number
|
||||
v-model="row.productConfig.discountPercent"
|
||||
:max="100"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
class="w-100%"
|
||||
@change="handleSkuDiscountPercentChange(row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</SpuAndSkuList>
|
||||
@@ -45,11 +57,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { SpuAndSkuList, SpuProperty, SpuSelect } from '../components'
|
||||
import { allSchemas, rules } from './discountActivity.data'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { cloneDeep, debounce } from 'lodash-es'
|
||||
import * as DiscountActivityApi from '@/api/mall/promotion/discount/discountActivity'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import { getPropertyList, RuleConfig } from '@/views/mall/product/spu/components'
|
||||
import { formatToFraction } from '@/utils'
|
||||
import { convertToInteger, erpCalculatePercentage, fenToYuan, yuanToFen } from '@/utils'
|
||||
import { PromotionDiscountTypeEnum } from '@/utils/constants'
|
||||
|
||||
defineOptions({ name: 'PromotionDiscountActivityForm' })
|
||||
|
||||
@@ -65,7 +78,13 @@ const formRef = ref() // 表单 Ref
|
||||
|
||||
const spuSelectRef = ref() // 商品和属性选择 Ref
|
||||
const spuAndSkuListRef = ref() // sku 限时折扣 配置组件Ref
|
||||
const ruleConfig: RuleConfig[] = []
|
||||
const ruleConfig: RuleConfig[] = [
|
||||
{
|
||||
name: 'productConfig.discountPrice',
|
||||
rule: (arg) => arg > 0,
|
||||
message: '商品优惠金额不能为 0 ！！！'
|
||||
}
|
||||
]
|
||||
const spuList = ref<DiscountActivityApi.SpuExtension[]>([]) // 选择的 spu
|
||||
const spuPropertyList = ref<SpuProperty<DiscountActivityApi.SpuExtension>[]>([])
|
||||
const spuIds = ref<number[]>([])
|
||||
@@ -101,21 +120,20 @@ const getSpuDetails = async (
|
||||
selectSkus?.forEach((sku) => {
|
||||
let config: DiscountActivityApi.DiscountProductVO = {
|
||||
skuId: sku.id!,
|
||||
spuId: spu.id,
|
||||
spuId: spu.id!,
|
||||
discountType: 1,
|
||||
discountPercent: 0,
|
||||
discountPrice: 0
|
||||
}
|
||||
if (typeof products !== 'undefined') {
|
||||
const product = products.find((item) => item.skuId === sku.id)
|
||||
if (product) {
|
||||
product.discountPercent = fenToYuan(product.discountPercent) as any
|
||||
product.discountPrice = fenToYuan(product.discountPrice) as any
|
||||
}
|
||||
config = product || config
|
||||
}
|
||||
sku.productConfig = config
|
||||
sku.price = formatToFraction(sku.price)
|
||||
sku.marketPrice = formatToFraction(sku.marketPrice)
|
||||
sku.costPrice = formatToFraction(sku.costPrice)
|
||||
sku.firstBrokeragePrice = formatToFraction(sku.firstBrokeragePrice)
|
||||
sku.secondBrokeragePrice = formatToFraction(sku.secondBrokeragePrice)
|
||||
})
|
||||
spu.skus = selectSkus as DiscountActivityApi.SkuExtension[]
|
||||
spuPropertyList.value.push({
|
||||
@@ -168,25 +186,13 @@ const submitForm = async () => {
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formRef.value.formModel as DiscountActivityApi.DiscountActivityVO
|
||||
// 获取折扣商品配置
|
||||
const products = cloneDeep(spuAndSkuListRef.value.getSkuConfigs('productConfig'))
|
||||
// 校验优惠金额、折扣百分比，是否正确
|
||||
// TODO @puhui999：这个交互，可以参考下 youzan 的
|
||||
let discountInvalid = false
|
||||
products.forEach((item: DiscountActivityApi.DiscountProductVO) => {
|
||||
if (item.discountPrice != null && item.discountPrice > 0) {
|
||||
item.discountType = 1
|
||||
} else if (item.discountPercent != null && item.discountPercent > 0) {
|
||||
item.discountType = 2
|
||||
} else {
|
||||
discountInvalid = true
|
||||
}
|
||||
item.discountPercent = convertToInteger(item.discountPercent)
|
||||
item.discountPrice = convertToInteger(item.discountPrice)
|
||||
})
|
||||
if (discountInvalid) {
|
||||
message.error('优惠金额和折扣百分比需要填写一个')
|
||||
return
|
||||
}
|
||||
const data = cloneDeep(formRef.value.formModel) as DiscountActivityApi.DiscountActivityVO
|
||||
data.products = products
|
||||
// 真正提交
|
||||
if (formType.value === 'create') {
|
||||
@@ -204,6 +210,36 @@ const submitForm = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
/** 处理 sku 优惠金额变动 */
|
||||
const handleSkuDiscountPriceChange = debounce((row: any) => {
|
||||
// 校验边界
|
||||
if (row.productConfig.discountPrice <= 0) {
|
||||
return
|
||||
}
|
||||
|
||||
// 设置优惠类型：满减
|
||||
row.productConfig.discountType = PromotionDiscountTypeEnum.PRICE.type
|
||||
// 设置折扣
|
||||
row.productConfig.discountPercent = erpCalculatePercentage(
|
||||
row.price - yuanToFen(row.productConfig.discountPrice),
|
||||
row.price
|
||||
)
|
||||
}, 200)
|
||||
/** 处理 sku 优惠折扣变动 */
|
||||
const handleSkuDiscountPercentChange = debounce((row: any) => {
|
||||
// 校验边界
|
||||
if (row.productConfig.discountPercent <= 0 || row.productConfig.discountPercent >= 100) {
|
||||
return
|
||||
}
|
||||
|
||||
// 设置优惠类型：折扣
|
||||
row.productConfig.discountType = PromotionDiscountTypeEnum.PERCENT.type
|
||||
// 设置满减金额
|
||||
row.productConfig.discountPrice = fenToYuan(
|
||||
row.price - row.price * (row.productConfig.discountPercent / 100.0 || 0)
|
||||
)
|
||||
}, 200)
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = async () => {
|
||||
spuList.value = []
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
|
||||
import { dateFormatter2 } from '@/utils/formatTime'
|
||||
|
||||
// TODO @zhangshai：
|
||||
// 表单校验
|
||||
export const rules = reactive({
|
||||
spuId: [required],
|
||||
name: [required],
|
||||
startTime: [required],
|
||||
endTime: [required],
|
||||
|
||||
@@ -22,13 +22,15 @@
|
||||
<div class="ml-10px w-100%">
|
||||
<div class="flex justify-between items-center w-100%">
|
||||
<span class="username">{{ item.userNickname }}</span>
|
||||
<span class="color-[var(--left-menu-text-color)]" style="font-size: 13px;">
|
||||
<span class="color-[var(--left-menu-text-color)]" style="font-size: 13px">
|
||||
{{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 最后聊天内容 -->
|
||||
<div
|
||||
v-dompurify-html="getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)"
|
||||
v-dompurify-html="
|
||||
getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)
|
||||
"
|
||||
class="last-message flex items-center color-[var(--left-menu-text-color)]"
|
||||
>
|
||||
</div>
|
||||
@@ -205,7 +207,7 @@ watch(showRightMenu, (val) => {
|
||||
|
||||
.active {
|
||||
border-left: 5px #3271ff solid;
|
||||
background-color: var(--left-menu-bg-active-color);
|
||||
background-color: var(--login-bg-color);
|
||||
}
|
||||
|
||||
.pinned {
|
||||
@@ -215,7 +217,7 @@ watch(showRightMenu, (val) => {
|
||||
.right-menu-ul {
|
||||
position: absolute;
|
||||
background-color: var(--app-content-bg-color);
|
||||
padding: 10px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
list-style-type: none; /* 移除默认的项目符号 */
|
||||
border-radius: 12px;
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
<OrderItem
|
||||
v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
|
||||
:message="item"
|
||||
class="max-w-70%"
|
||||
class="max-w-100%"
|
||||
/>
|
||||
</MessageItem>
|
||||
</div>
|
||||
@@ -423,9 +423,9 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
|
||||
|
||||
// 消息气泡
|
||||
.kefu-message {
|
||||
color: #A9A9A9;
|
||||
color: #a9a9a9;
|
||||
border-radius: 5px;
|
||||
box-shadow: 3px 3px 5px rgba(220,220,220, 0.1);
|
||||
box-shadow: 3px 3px 5px rgba(220, 220, 220, 0.1);
|
||||
padding: 5px 10px;
|
||||
width: auto;
|
||||
max-width: 50%;
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
<template>
|
||||
<div v-if="isObject(getMessageContent)" @click="openDetail(getMessageContent.id)" style="cursor: pointer;">
|
||||
<div v-if="isObject(getMessageContent)">
|
||||
<div :key="getMessageContent.id" class="order-list-card-box mt-14px">
|
||||
<div class="order-card-header flex items-center justify-between p-x-5px">
|
||||
<div class="order-no">订单号：{{ getMessageContent.no }}</div>
|
||||
<div class="order-no">
|
||||
订单号：
|
||||
<span style="cursor: pointer" @click="openDetail(getMessageContent.id)">
|
||||
{{ getMessageContent.no }}
|
||||
</span>
|
||||
</div>
|
||||
<div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
|
||||
{{ formatOrderStatus(getMessageContent) }}
|
||||
</div>
|
||||
@@ -113,8 +118,15 @@ function formatOrderStatus(order: any) {
|
||||
height: 28px;
|
||||
|
||||
.order-no {
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
span {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--left-menu-bg-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -66,7 +66,7 @@ export const useEmoji = () => {
|
||||
)
|
||||
for (const path in pathList) {
|
||||
const imageModule: any = await pathList[path]()
|
||||
emojiPathList.value.push(imageModule.default)
|
||||
emojiPathList.value.push({ path: path, src: imageModule.default })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -116,7 +116,10 @@ export const useEmoji = () => {
|
||||
function getEmojiFileByName(name: string) {
|
||||
for (const emoji of emojiList) {
|
||||
if (emoji.name === name) {
|
||||
return emojiPathList.value.find((item: string) => item.indexOf(emoji.file) > -1)
|
||||
const emojiPath = emojiPathList.value.find(
|
||||
(item: { path: string; src: string }) => item.path.indexOf(emoji.file) > -1
|
||||
)
|
||||
return emojiPath ? emojiPath.src : undefined
|
||||
}
|
||||
}
|
||||
return false
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
import { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory } from './components'
|
||||
import { WebSocketMessageTypeConstants } from './components/tools/constants'
|
||||
import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
|
||||
import { getAccessToken } from '@/utils/auth'
|
||||
import { getRefreshToken } from '@/utils/auth'
|
||||
import { useWebSocket } from '@vueuse/core'
|
||||
|
||||
defineOptions({ name: 'KeFu' })
|
||||
@@ -34,7 +34,9 @@ const message = useMessage() // 消息弹窗
|
||||
|
||||
// ======================= WebSocket start =======================
|
||||
const server = ref(
|
||||
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + '?token=' + getAccessToken()
|
||||
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
|
||||
'?token=' +
|
||||
getRefreshToken() // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
|
||||
) // WebSocket 服务地址
|
||||
|
||||
/** 发起 WebSocket 连接 */
|
||||
|
||||
227
src/views/mall/promotion/point/activity/PointActivityForm.vue
Normal file
227
src/views/mall/promotion/point/activity/PointActivityForm.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
|
||||
<Form
|
||||
ref="formRef"
|
||||
v-loading="formLoading"
|
||||
:isCol="true"
|
||||
:rules="rules"
|
||||
:schema="allSchemas.formSchema"
|
||||
>
|
||||
<!-- 先选择 -->
|
||||
<template #spuId>
|
||||
<el-button v-if="!isFormUpdate" @click="spuSelectRef.open()">选择商品</el-button>
|
||||
<SpuAndSkuList
|
||||
ref="spuAndSkuListRef"
|
||||
:rule-config="ruleConfig"
|
||||
:spu-list="spuList"
|
||||
:spu-property-list-p="spuPropertyList"
|
||||
>
|
||||
<el-table-column align="center" label="可兑换库存" min-width="168">
|
||||
<template #default="{ row: sku }">
|
||||
<el-input-number
|
||||
v-model="sku.productConfig.stock"
|
||||
:max="sku.stock"
|
||||
:min="0"
|
||||
class="w-100%"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="可兑换次数" min-width="168">
|
||||
<template #default="{ row: sku }">
|
||||
<el-input-number v-model="sku.productConfig.count" :min="0" class="w-100%" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="所需积分" min-width="168">
|
||||
<template #default="{ row: sku }">
|
||||
<el-input-number v-model="sku.productConfig.point" :min="0" class="w-100%" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="所需金额(元)" min-width="168">
|
||||
<template #default="{ row: sku }">
|
||||
<el-input-number
|
||||
v-model="sku.productConfig.price"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
class="w-100%"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</SpuAndSkuList>
|
||||
</template>
|
||||
</Form>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
<SpuSelect ref="spuSelectRef" :isSelectSku="true" @confirm="selectSpu" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { SpuAndSkuList, SpuProperty, SpuSelect } from '../../components'
|
||||
import { allSchemas, rules } from './pointActivity.data'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import {
|
||||
PointActivityApi,
|
||||
PointActivityVO,
|
||||
PointProductVO,
|
||||
SkuExtension,
|
||||
SpuExtension
|
||||
} from '@/api/mall/promotion/point'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import { getPropertyList, RuleConfig } from '@/views/mall/product/spu/components'
|
||||
import { convertToInteger, formatToFraction } from '@/utils'
|
||||
|
||||
defineOptions({ name: 'PromotionSeckillActivityForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formRef = ref() // 表单 Ref
|
||||
const isFormUpdate = ref(false) // 是否更新表单
|
||||
|
||||
// ================= 商品选择相关 =================
|
||||
|
||||
const spuSelectRef = ref() // 商品和属性选择 Ref
|
||||
const spuAndSkuListRef = ref() // sku 积分商城商品配置组件Ref
|
||||
const ruleConfig: RuleConfig[] = [
|
||||
{
|
||||
name: 'productConfig.stock',
|
||||
rule: (arg) => arg >= 1,
|
||||
message: '商品可兑换库存必须大于等于 1 ！！！'
|
||||
},
|
||||
{
|
||||
name: 'productConfig.point',
|
||||
rule: (arg) => arg >= 1,
|
||||
message: '商品所需兑换积分必须大于等于 1 ！！！'
|
||||
},
|
||||
{
|
||||
name: 'productConfig.count',
|
||||
rule: (arg) => arg >= 1,
|
||||
message: '商品可兑换次数必须大于等于 1 ！！！'
|
||||
}
|
||||
]
|
||||
const spuList = ref<SpuExtension[]>([]) // 选择的 spu
|
||||
const spuPropertyList = ref<SpuProperty<SpuExtension>[]>([])
|
||||
const selectSpu = (spuId: number, skuIds: number[]) => {
|
||||
formRef.value.setValues({ spuId })
|
||||
getSpuDetails(spuId, skuIds)
|
||||
}
|
||||
/**
|
||||
* 获取 SPU 详情
|
||||
*/
|
||||
const getSpuDetails = async (
|
||||
spuId: number,
|
||||
skuIds: number[] | undefined,
|
||||
products?: PointProductVO[]
|
||||
) => {
|
||||
const spuProperties: SpuProperty<SpuExtension>[] = []
|
||||
const res = (await ProductSpuApi.getSpuDetailList([spuId])) as SpuExtension[]
|
||||
if (res.length == 0) {
|
||||
return
|
||||
}
|
||||
spuList.value = []
|
||||
// 因为只能选择一个
|
||||
const spu = res[0]
|
||||
const selectSkus =
|
||||
typeof skuIds === 'undefined' ? spu?.skus : spu?.skus?.filter((sku) => skuIds.includes(sku.id!))
|
||||
selectSkus?.forEach((sku) => {
|
||||
let config: PointProductVO = {
|
||||
skuId: sku.id!,
|
||||
stock: 0,
|
||||
price: 0,
|
||||
point: 0,
|
||||
count: 0
|
||||
}
|
||||
if (typeof products !== 'undefined') {
|
||||
const product = products.find((item) => item.skuId === sku.id)
|
||||
if (product) {
|
||||
product.price = formatToFraction(product.price) as any
|
||||
}
|
||||
config = product || config
|
||||
}
|
||||
sku.productConfig = config
|
||||
})
|
||||
spu.skus = selectSkus as SkuExtension[]
|
||||
spuProperties.push({
|
||||
spuId: spu.id!,
|
||||
spuDetail: spu,
|
||||
propertyList: getPropertyList(spu)
|
||||
})
|
||||
spuList.value.push(spu)
|
||||
spuPropertyList.value = spuProperties
|
||||
}
|
||||
|
||||
// ================= end =================
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
await resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = (await PointActivityApi.getPointActivity(id)) as PointActivityVO
|
||||
isFormUpdate.value = true
|
||||
await getSpuDetails(
|
||||
data.spuId!,
|
||||
data.products?.map((sku) => sku.skuId),
|
||||
data.products
|
||||
)
|
||||
formRef.value.setValues(data)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.getElFormRef().validate()
|
||||
if (!valid) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
// 获取秒杀商品配置
|
||||
const products = cloneDeep(spuAndSkuListRef.value.getSkuConfigs('productConfig'))
|
||||
products.forEach((item: PointProductVO) => {
|
||||
item.price = convertToInteger(item.price)
|
||||
})
|
||||
const data = formRef.value.formModel as PointActivityVO
|
||||
data.products = products
|
||||
// 真正提交
|
||||
if (formType.value === 'create') {
|
||||
await PointActivityApi.createPointActivity(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await PointActivityApi.updatePointActivity(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = async () => {
|
||||
spuList.value = []
|
||||
spuPropertyList.value = []
|
||||
isFormUpdate.value = false
|
||||
await nextTick()
|
||||
formRef.value.getElFormRef().resetFields()
|
||||
}
|
||||
</script>
|
||||
219
src/views/mall/promotion/point/activity/index.vue
Normal file
219
src/views/mall/promotion/point/activity/index.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<doc-alert title="【营销】积分商城活动" url="https://doc.iocoder.cn/mall/promotion-point/" />
|
||||
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="活动状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请选择活动状态"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['promotion:point-activity:create']"
|
||||
plain
|
||||
type="primary"
|
||||
@click="openForm('create')"
|
||||
>
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
|
||||
<el-table-column label="活动编号" min-width="80" prop="id" />
|
||||
<el-table-column label="商品图片" min-width="80" prop="spuName">
|
||||
<template #default="scope">
|
||||
<el-image
|
||||
:preview-src-list="[scope.row.picUrl]"
|
||||
:src="scope.row.picUrl"
|
||||
class="h-40px w-40px"
|
||||
preview-teleported
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品标题" min-width="300" prop="spuName" />
|
||||
<el-table-column
|
||||
:formatter="fenToYuanFormat"
|
||||
label="原价"
|
||||
min-width="100"
|
||||
prop="marketPrice"
|
||||
/>
|
||||
<el-table-column label="原价" min-width="100" prop="marketPrice" />
|
||||
<el-table-column align="center" label="活动状态" min-width="100" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="库存" min-width="80" prop="stock" />
|
||||
<el-table-column align="center" label="总库存" min-width="80" prop="totalStock" />
|
||||
<el-table-column align="center" label="已兑换数量" min-width="100" prop="redeemedQuantity">
|
||||
<template #default="{ row }">
|
||||
{{ getRedeemedQuantity(row) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="150px">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['promotion:point-activity:update']"
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.status === 0"
|
||||
v-hasPermi="['promotion:point-activity:close']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleClose(scope.row.id)"
|
||||
>
|
||||
关闭
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
v-hasPermi="['promotion:point-activity:delete']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<PointActivityForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import PointActivityForm from './PointActivityForm.vue'
|
||||
import { fenToYuanFormat } from '@/utils/formatter'
|
||||
import { PointActivityApi } from '@/api/mall/promotion/point'
|
||||
|
||||
defineOptions({ name: 'PointActivity' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 列表的数据
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
status: null
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const getRedeemedQuantity = computed(() => (row: any) => (row.totalStock || 0) - (row.stock || 0)) // 获得商品已兑换数量
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await PointActivityApi.getPointActivityPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 关闭按钮操作 */
|
||||
const handleClose = async (id: number) => {
|
||||
try {
|
||||
// 关闭的二次确认
|
||||
await message.confirm('确认关闭该积分商城活动吗？')
|
||||
// 发起关闭
|
||||
await PointActivityApi.closePointActivity(id)
|
||||
message.success('关闭成功')
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await PointActivityApi.deletePointActivity(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
await getList()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
|
||||
|
||||
// 表单校验
|
||||
export const rules = reactive({
|
||||
spuId: [required],
|
||||
sort: [required]
|
||||
})
|
||||
|
||||
// CrudSchema https://doc.iocoder.cn/vue3/crud-schema/
|
||||
const crudSchemas = reactive<CrudSchema[]>([
|
||||
{
|
||||
label: '排序',
|
||||
field: 'sort',
|
||||
form: {
|
||||
component: 'InputNumber',
|
||||
value: 0
|
||||
},
|
||||
table: {
|
||||
width: 80
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '积分商城活动商品',
|
||||
field: 'spuId',
|
||||
isTable: true,
|
||||
isSearch: false,
|
||||
form: {
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
table: {
|
||||
width: 300
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
field: 'remark',
|
||||
isSearch: false,
|
||||
form: {
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
type: 'textarea',
|
||||
rows: 4
|
||||
},
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
table: {
|
||||
width: 300
|
||||
}
|
||||
}
|
||||
])
|
||||
export const { allSchemas } = useCrudSchemas(crudSchemas)
|
||||
154
src/views/mall/promotion/point/components/PointShowcase.vue
Normal file
154
src/views/mall/promotion/point/components/PointShowcase.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap items-center gap-8px">
|
||||
<div
|
||||
v-for="(pointActivity, index) in pointActivityList"
|
||||
:key="pointActivity.id"
|
||||
class="select-box spu-pic"
|
||||
>
|
||||
<el-tooltip :content="pointActivity.name">
|
||||
<div class="relative h-full w-full">
|
||||
<el-image :src="pointActivity.picUrl" class="h-full w-full" />
|
||||
<Icon
|
||||
v-show="!disabled"
|
||||
class="del-icon"
|
||||
icon="ep:circle-close-filled"
|
||||
@click="handleRemoveActivity(index)"
|
||||
/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-tooltip v-if="canAdd" content="选择活动">
|
||||
<div class="select-box" @click="openSeckillActivityTableSelect">
|
||||
<Icon icon="ep:plus" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!-- 拼团活动选择对话框（表格形式） -->
|
||||
<PointTableSelect
|
||||
ref="pointActivityTableSelectRef"
|
||||
:multiple="limit != 1"
|
||||
@change="handleActivitySelected"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import PointTableSelect from './PointTableSelect.vue'
|
||||
import { PointActivityApi, PointActivityVO } from '@/api/mall/promotion/point'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { oneOfType } from 'vue-types'
|
||||
import { isArray } from '@/utils/is'
|
||||
|
||||
// 活动橱窗，一般用于装修时使用
|
||||
// 提供功能：展示活动列表、添加活动、删除活动
|
||||
defineOptions({ name: 'PointShowcase' })
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: oneOfType<number | Array<number>>([Number, Array]).isRequired,
|
||||
// 限制数量：默认不限制
|
||||
limit: propTypes.number.def(Number.MAX_VALUE),
|
||||
disabled: propTypes.bool.def(false)
|
||||
})
|
||||
|
||||
// 计算是否可以添加
|
||||
const canAdd = computed(() => {
|
||||
// 情况一：禁用时不可以添加
|
||||
if (props.disabled) return false
|
||||
// 情况二：未指定限制数量时，可以添加
|
||||
if (!props.limit) return true
|
||||
// 情况三：检查已添加数量是否小于限制数量
|
||||
return pointActivityList.value.length < props.limit
|
||||
})
|
||||
|
||||
// 拼团活动列表
|
||||
const pointActivityList = ref<PointActivityVO[]>([])
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
async () => {
|
||||
const ids = isArray(props.modelValue)
|
||||
? // 情况一：多选
|
||||
props.modelValue
|
||||
: // 情况二：单选
|
||||
props.modelValue
|
||||
? [props.modelValue]
|
||||
: []
|
||||
// 不需要返显
|
||||
if (ids.length === 0) {
|
||||
pointActivityList.value = []
|
||||
return
|
||||
}
|
||||
// 只有活动发生变化之后，才会查询活动
|
||||
if (
|
||||
pointActivityList.value.length === 0 ||
|
||||
pointActivityList.value.some((pointActivity) => !ids.includes(pointActivity.id!))
|
||||
) {
|
||||
pointActivityList.value = await PointActivityApi.getPointActivityListByIds(ids)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
/** 活动表格选择对话框 */
|
||||
const pointActivityTableSelectRef = ref()
|
||||
// 打开对话框
|
||||
const openSeckillActivityTableSelect = () => {
|
||||
pointActivityTableSelectRef.value.open(pointActivityList.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择活动后触发
|
||||
* @param activityList 选中的活动列表
|
||||
*/
|
||||
const handleActivitySelected = (activityList: PointActivityVO | PointActivityVO[]) => {
|
||||
pointActivityList.value = isArray(activityList) ? activityList : [activityList]
|
||||
emitActivityChange()
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除活动
|
||||
* @param index 活动索引
|
||||
*/
|
||||
const handleRemoveActivity = (index: number) => {
|
||||
pointActivityList.value.splice(index, 1)
|
||||
emitActivityChange()
|
||||
}
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
const emitActivityChange = () => {
|
||||
if (props.limit === 1) {
|
||||
const pointActivity = pointActivityList.value.length > 0 ? pointActivityList.value[0] : null
|
||||
emit('update:modelValue', pointActivity?.id || 0)
|
||||
emit('change', pointActivity)
|
||||
} else {
|
||||
emit(
|
||||
'update:modelValue',
|
||||
pointActivityList.value.map((pointActivity) => pointActivity.id)
|
||||
)
|
||||
emit('change', pointActivityList.value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select-box {
|
||||
display: flex;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px dashed var(--el-border-color-darker);
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spu-pic {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.del-icon {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
z-index: 1;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
</style>
|
||||
300
src/views/mall/promotion/point/components/PointTableSelect.vue
Normal file
300
src/views/mall/promotion/point/components/PointTableSelect.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :appendToBody="true" title="选择活动" width="70%">
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="活动状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请选择活动状态"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="loading" :data="list" show-overflow-tooltip>
|
||||
<!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
|
||||
<el-table-column v-if="multiple" width="55">
|
||||
<template #header>
|
||||
<el-checkbox
|
||||
v-model="isCheckAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAll"
|
||||
/>
|
||||
</template>
|
||||
<template #default="{ row }">
|
||||
<el-checkbox
|
||||
v-model="checkedStatus[row.id]"
|
||||
@change="(checked: boolean) => handleCheckOne(checked, row, true)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 2. 单选模式 -->
|
||||
<el-table-column v-else label="#" width="55">
|
||||
<template #default="{ row }">
|
||||
<el-radio
|
||||
v-model="selectedActivityId"
|
||||
:value="row.id"
|
||||
@change="handleSingleSelected(row)"
|
||||
>
|
||||
<!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
|
||||
|
||||
</el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="活动编号" min-width="80" prop="id" />
|
||||
<el-table-column label="商品图片" min-width="80" prop="spuName">
|
||||
<template #default="scope">
|
||||
<el-image
|
||||
:preview-src-list="[scope.row.picUrl]"
|
||||
:src="scope.row.picUrl"
|
||||
class="h-40px w-40px"
|
||||
preview-teleported
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品标题" min-width="300" prop="spuName" />
|
||||
<el-table-column
|
||||
:formatter="fenToYuanFormat"
|
||||
label="原价"
|
||||
min-width="100"
|
||||
prop="marketPrice"
|
||||
/>
|
||||
<el-table-column label="原价" min-width="100" prop="marketPrice" />
|
||||
<el-table-column align="center" label="活动状态" min-width="100" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="库存" min-width="80" prop="stock" />
|
||||
<el-table-column align="center" label="总库存" min-width="80" prop="totalStock" />
|
||||
<el-table-column align="center" label="已兑换数量" min-width="100" prop="redeemedQuantity">
|
||||
<template #default="{ row }">
|
||||
{{ getRedeemedQuantity(row) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
width="180px"
|
||||
/>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
<template v-if="multiple" #footer>
|
||||
<el-button type="primary" @click="handleEmitChange">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { CHANGE_EVENT } from 'element-plus'
|
||||
import { PointActivityApi, PointActivityVO } from '@/api/mall/promotion/point'
|
||||
import { fenToYuanFormat } from '@/utils/formatter'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
|
||||
/**
|
||||
* 活动表格选择对话框
|
||||
* 1. 单选模式：
|
||||
* 1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
|
||||
* 1.2 再次打开时，保持选中状态
|
||||
* 2. 多选模式：
|
||||
* 2.1 点击表格左侧的多选框时，记录选中的活动
|
||||
* 2.2 切换分页时，保持活动的选中状态
|
||||
* 2.3 点击右下角的确定按钮时，结束选择，关闭对话框
|
||||
* 2.4 再次打开时，保持选中状态
|
||||
*/
|
||||
defineOptions({ name: 'PointTableSelect' })
|
||||
|
||||
defineProps({
|
||||
// 多选模式
|
||||
multiple: propTypes.bool.def(false)
|
||||
})
|
||||
|
||||
// 列表的总页数
|
||||
const total = ref(0)
|
||||
// 列表的数据
|
||||
const list = ref<PointActivityVO[]>([])
|
||||
// 列表的加载中
|
||||
const loading = ref(false)
|
||||
// 弹窗的是否展示
|
||||
const dialogVisible = ref(false)
|
||||
// 查询参数
|
||||
const queryParams = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
status: undefined
|
||||
})
|
||||
const getRedeemedQuantity = computed(() => (row: any) => (row.totalStock || 0) - (row.stock || 0)) // 获得商品已兑换数量
|
||||
/** 打开弹窗 */
|
||||
const open = (pointList?: PointActivityVO[]) => {
|
||||
// 重置
|
||||
checkedActivities.value = []
|
||||
checkedStatus.value = {}
|
||||
isCheckAll.value = false
|
||||
isIndeterminate.value = false
|
||||
|
||||
// 处理已选中
|
||||
if (pointList && pointList.length > 0) {
|
||||
checkedActivities.value = [...pointList]
|
||||
checkedStatus.value = Object.fromEntries(pointList.map((activityVO) => [activityVO.id, true]))
|
||||
}
|
||||
|
||||
dialogVisible.value = true
|
||||
resetQuery()
|
||||
}
|
||||
// 提供 open 方法，用于打开弹窗
|
||||
defineExpose({ open })
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await PointActivityApi.getPointActivityPage(queryParams.value)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
// checkbox绑定undefined会有问题，需要给一个bool值
|
||||
list.value.forEach(
|
||||
(activityVO) =>
|
||||
(checkedStatus.value[activityVO.id] = checkedStatus.value[activityVO.id] || false)
|
||||
)
|
||||
// 计算全选框状态
|
||||
calculateIsCheckAll()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryParams.value = {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
status: undefined
|
||||
}
|
||||
getList()
|
||||
}
|
||||
|
||||
// 是否全选
|
||||
const isCheckAll = ref(false)
|
||||
// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
|
||||
const isIndeterminate = ref(false)
|
||||
// 选中的活动
|
||||
const checkedActivities = ref<PointActivityVO[]>([])
|
||||
// 选中状态：key为活动ID，value为是否选中
|
||||
const checkedStatus = ref<Record<string, boolean>>({})
|
||||
|
||||
// 选中的活动 activityId
|
||||
const selectedActivityId = ref()
|
||||
/** 单选中时触发 */
|
||||
const handleSingleSelected = (pointActivityVO: PointActivityVO) => {
|
||||
emits(CHANGE_EVENT, pointActivityVO)
|
||||
// 关闭弹窗
|
||||
dialogVisible.value = false
|
||||
// 记住上次选择的ID
|
||||
selectedActivityId.value = pointActivityVO.id
|
||||
}
|
||||
|
||||
/** 多选完成 */
|
||||
const handleEmitChange = () => {
|
||||
// 关闭弹窗
|
||||
dialogVisible.value = false
|
||||
emits(CHANGE_EVENT, [...checkedActivities.value])
|
||||
}
|
||||
|
||||
/** 确认选择时的触发事件 */
|
||||
const emits = defineEmits<{
|
||||
(e: CHANGE_EVENT, v: PointActivityVO | PointActivityVO[] | any): void
|
||||
}>()
|
||||
|
||||
/** 全选/全不选 */
|
||||
const handleCheckAll = (checked: boolean) => {
|
||||
isCheckAll.value = checked
|
||||
isIndeterminate.value = false
|
||||
|
||||
list.value.forEach((pointActivity) => handleCheckOne(checked, pointActivity, false))
|
||||
}
|
||||
|
||||
/**
|
||||
* 选中一行
|
||||
* @param checked 是否选中
|
||||
* @param pointActivity 活动
|
||||
* @param isCalcCheckAll 是否计算全选
|
||||
*/
|
||||
const handleCheckOne = (
|
||||
checked: boolean,
|
||||
pointActivity: PointActivityVO,
|
||||
isCalcCheckAll: boolean
|
||||
) => {
|
||||
if (checked) {
|
||||
checkedActivities.value.push(pointActivity)
|
||||
checkedStatus.value[pointActivity.id] = true
|
||||
} else {
|
||||
const index = findCheckedIndex(pointActivity)
|
||||
if (index > -1) {
|
||||
checkedActivities.value.splice(index, 1)
|
||||
checkedStatus.value[pointActivity.id] = false
|
||||
isCheckAll.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 计算全选框状态
|
||||
if (isCalcCheckAll) {
|
||||
calculateIsCheckAll()
|
||||
}
|
||||
}
|
||||
|
||||
// 查找活动在已选中活动列表中的索引
|
||||
const findCheckedIndex = (activityVO: PointActivityVO) =>
|
||||
checkedActivities.value.findIndex((item) => item.id === activityVO.id)
|
||||
|
||||
// 计算全选框状态
|
||||
const calculateIsCheckAll = () => {
|
||||
isCheckAll.value = list.value.every((activityVO) => checkedStatus.value[activityVO.id])
|
||||
// 计算中间状态：不是全部选中 && 任意一个选中
|
||||
isIndeterminate.value =
|
||||
!isCheckAll.value && list.value.some((activityVO) => checkedStatus.value[activityVO.id])
|
||||
}
|
||||
</script>
|
||||
@@ -56,7 +56,7 @@
|
||||
label="分类"
|
||||
prop="productCategoryIds"
|
||||
>
|
||||
<ProductCategorySelect v-model="formData.productCategoryIds" />
|
||||
<ProductCategorySelect v-model="formData.productCategoryIds" :multiple="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" placeholder="请输入备注" />
|
||||
@@ -119,6 +119,9 @@ const open = async (type: string, id?: number) => {
|
||||
// 规则分转元
|
||||
data.rules?.forEach((item: any) => {
|
||||
item.discountPrice = fenToYuan(item.discountPrice || 0)
|
||||
if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
|
||||
item.limit = fenToYuan(item.limit || 0)
|
||||
}
|
||||
})
|
||||
formData.value = data
|
||||
// 获得商品范围
|
||||
@@ -151,6 +154,9 @@ const submitForm = async () => {
|
||||
// 规则元转分
|
||||
data.rules.forEach((item) => {
|
||||
item.discountPrice = yuanToFen(item.discountPrice || 0)
|
||||
if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
|
||||
item.limit = yuanToFen(item.limit || 0)
|
||||
}
|
||||
})
|
||||
// 设置商品范围
|
||||
setProductScopeValues(data)
|
||||
@@ -188,7 +194,7 @@ const getProductScope = async () => {
|
||||
case PromotionProductScopeEnum.CATEGORY.scope:
|
||||
await nextTick()
|
||||
let productCategoryIds = formData.value.productScopeValues as any
|
||||
if (Array.isArray(productCategoryIds) && productCategoryIds.length > 0) {
|
||||
if (Array.isArray(productCategoryIds) && productCategoryIds.length === 1) {
|
||||
// 单选时使用数组不能反显
|
||||
productCategoryIds = productCategoryIds[0]
|
||||
}
|
||||
|
||||
@@ -10,14 +10,25 @@
|
||||
<el-form ref="formRef" :model="rule">
|
||||
<el-form-item label="优惠门槛:" label-width="100px" prop="limit">
|
||||
满
|
||||
<el-input-number
|
||||
v-if="PromotionConditionTypeEnum.PRICE.type === formData.conditionType"
|
||||
v-model="rule.limit"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
class="w-150px! p-x-20px!"
|
||||
placeholder=""
|
||||
type="number"
|
||||
controls-position="right"
|
||||
/>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="rule.limit"
|
||||
:min="0"
|
||||
class="w-150px! p-x-20px!"
|
||||
placeholder=""
|
||||
type="number"
|
||||
/>
|
||||
<!-- TODO @puhui999：走字典数据？ -->
|
||||
{{ PromotionConditionTypeEnum.PRICE.type === formData.conditionType ? '元' : '件' }}
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠内容:" label-width="100px">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-button class="ml-10px" type="text" @click="selectCoupon">添加优惠卷</el-button>
|
||||
<el-button class="ml-10px" type="text" @click="selectCoupon">添加优惠劵</el-button>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
@@ -57,7 +57,7 @@ const emits = defineEmits<{
|
||||
const rewardRule = useVModel(props, 'modelValue', emits) // 赠送规则
|
||||
const list = ref<GiveCouponVO[]>([]) // 选择的优惠券列表
|
||||
|
||||
/** 选择赠送的优惠卷类型拓展 */
|
||||
/** 选择赠送的优惠类型拓展 */
|
||||
interface GiveCouponVO extends CouponTemplateApi.CouponTemplateVO {
|
||||
giveCount?: number
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
placeholder="请选择活动状态"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_ACTIVITY_STATUS)"
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
@@ -55,7 +55,7 @@
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['product:brand:create']"
|
||||
v-hasPermi="['promotion:reward-activity:create']"
|
||||
plain
|
||||
type="primary"
|
||||
@click="openForm('create')"
|
||||
@@ -71,6 +71,11 @@
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" default-expand-all row-key="id">
|
||||
<el-table-column label="活动名称" prop="name" />
|
||||
<el-table-column label="活动范围" prop="productScope" >
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:formatter="dateFormatter"
|
||||
align="center"
|
||||
@@ -85,7 +90,7 @@
|
||||
/>
|
||||
<el-table-column align="center" label="状态" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.PROMOTION_ACTIVITY_STATUS" :value="scope.row.status" />
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
@@ -98,7 +103,7 @@
|
||||
<el-table-column align="center" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['product:brand:update']"
|
||||
v-hasPermi="['promotion:reward-activity:update']"
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
@@ -106,7 +111,16 @@
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['product:brand:delete']"
|
||||
v-if="scope.row.status === 0"
|
||||
v-hasPermi="['promotion:reward-activity:close']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleClose(scope.row.id)"
|
||||
>
|
||||
关闭
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['promotion:reward-activity:delete']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
@@ -180,6 +194,19 @@ const openForm = (type: string, id?: number) => {
|
||||
formRef.value?.open(type, id)
|
||||
}
|
||||
|
||||
/** 关闭按钮操作 */
|
||||
const handleClose = async (id: number) => {
|
||||
try {
|
||||
// 关闭的二次确认
|
||||
await message.confirm('确认关闭该满减活动吗？')
|
||||
// 发起关闭
|
||||
await RewardActivityApi.closeRewardActivity(id)
|
||||
message.success('关闭成功')
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
|
||||
156
src/views/mall/promotion/seckill/components/SeckillShowcase.vue
Normal file
156
src/views/mall/promotion/seckill/components/SeckillShowcase.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap items-center gap-8px">
|
||||
<div
|
||||
v-for="(seckillActivity, index) in Activitys"
|
||||
:key="seckillActivity.id"
|
||||
class="select-box spu-pic"
|
||||
>
|
||||
<el-tooltip :content="seckillActivity.name">
|
||||
<div class="relative h-full w-full">
|
||||
<el-image :src="seckillActivity.picUrl" class="h-full w-full" />
|
||||
<Icon
|
||||
v-show="!disabled"
|
||||
class="del-icon"
|
||||
icon="ep:circle-close-filled"
|
||||
@click="handleRemoveActivity(index)"
|
||||
/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-tooltip content="选择活动" v-if="canAdd">
|
||||
<div class="select-box" @click="openSeckillActivityTableSelect">
|
||||
<Icon icon="ep:plus" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!-- 拼团活动选择对话框（表格形式） -->
|
||||
<SeckillTableSelect
|
||||
ref="seckillActivityTableSelectRef"
|
||||
:multiple="limit != 1"
|
||||
@change="handleActivitySelected"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { oneOfType } from 'vue-types'
|
||||
import { isArray } from '@/utils/is'
|
||||
import SeckillTableSelect from '@/views/mall/promotion/seckill/components/SeckillTableSelect.vue'
|
||||
|
||||
// 活动橱窗，一般用于装修时使用
|
||||
// 提供功能：展示活动列表、添加活动、删除活动
|
||||
defineOptions({ name: 'SeckillShowcase' })
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: oneOfType<number | Array<number>>([Number, Array]).isRequired,
|
||||
// 限制数量：默认不限制
|
||||
limit: propTypes.number.def(Number.MAX_VALUE),
|
||||
disabled: propTypes.bool.def(false)
|
||||
})
|
||||
|
||||
// 计算是否可以添加
|
||||
const canAdd = computed(() => {
|
||||
// 情况一：禁用时不可以添加
|
||||
if (props.disabled) return false
|
||||
// 情况二：未指定限制数量时，可以添加
|
||||
if (!props.limit) return true
|
||||
// 情况三：检查已添加数量是否小于限制数量
|
||||
return Activitys.value.length < props.limit
|
||||
})
|
||||
|
||||
// 拼团活动列表
|
||||
const Activitys = ref<SeckillActivityApi.SeckillActivityVO[]>([])
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
async () => {
|
||||
const ids = isArray(props.modelValue)
|
||||
? // 情况一：多选
|
||||
props.modelValue
|
||||
: // 情况二：单选
|
||||
props.modelValue
|
||||
? [props.modelValue]
|
||||
: []
|
||||
// 不需要返显
|
||||
if (ids.length === 0) {
|
||||
Activitys.value = []
|
||||
return
|
||||
}
|
||||
// 只有活动发生变化之后，才会查询活动
|
||||
if (
|
||||
Activitys.value.length === 0 ||
|
||||
Activitys.value.some((seckillActivity) => !ids.includes(seckillActivity.id!))
|
||||
) {
|
||||
Activitys.value = await SeckillActivityApi.getSeckillActivityListByIds(ids)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
/** 活动表格选择对话框 */
|
||||
const seckillActivityTableSelectRef = ref()
|
||||
// 打开对话框
|
||||
const openSeckillActivityTableSelect = () => {
|
||||
seckillActivityTableSelectRef.value.open(Activitys.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择活动后触发
|
||||
* @param activityVOs 选中的活动列表
|
||||
*/
|
||||
const handleActivitySelected = (
|
||||
activityVOs: SeckillActivityApi.SeckillActivityVO | SeckillActivityApi.SeckillActivityVO[]
|
||||
) => {
|
||||
Activitys.value = isArray(activityVOs) ? activityVOs : [activityVOs]
|
||||
emitActivityChange()
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除活动
|
||||
* @param index 活动索引
|
||||
*/
|
||||
const handleRemoveActivity = (index: number) => {
|
||||
Activitys.value.splice(index, 1)
|
||||
emitActivityChange()
|
||||
}
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
const emitActivityChange = () => {
|
||||
if (props.limit === 1) {
|
||||
const seckillActivity = Activitys.value.length > 0 ? Activitys.value[0] : null
|
||||
emit('update:modelValue', seckillActivity?.id || 0)
|
||||
emit('change', seckillActivity)
|
||||
} else {
|
||||
emit(
|
||||
'update:modelValue',
|
||||
Activitys.value.map((seckillActivity) => seckillActivity.id)
|
||||
)
|
||||
emit('change', Activitys.value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select-box {
|
||||
display: flex;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px dashed var(--el-border-color-darker);
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spu-pic {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.del-icon {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
z-index: 1;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :appendToBody="true" title="选择活动" width="70%">
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入活动名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择活动状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="loading" :data="list" show-overflow-tooltip>
|
||||
<!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
|
||||
<el-table-column width="55" v-if="multiple">
|
||||
<template #header>
|
||||
<el-checkbox
|
||||
v-model="isCheckAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAll"
|
||||
/>
|
||||
</template>
|
||||
<template #default="{ row }">
|
||||
<el-checkbox
|
||||
v-model="checkedStatus[row.id]"
|
||||
@change="(checked: boolean) => handleCheckOne(checked, row, true)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 2. 单选模式 -->
|
||||
<el-table-column label="#" width="55" v-else>
|
||||
<template #default="{ row }">
|
||||
<el-radio
|
||||
:value="row.id"
|
||||
v-model="selectedActivityId"
|
||||
@change="handleSingleSelected(row)"
|
||||
>
|
||||
<!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
|
||||
|
||||
</el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="活动编号" prop="id" min-width="80" />
|
||||
<el-table-column label="活动名称" prop="name" min-width="140" />
|
||||
<el-table-column label="活动时间" min-width="210">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
|
||||
~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品图片" prop="spuName" min-width="80">
|
||||
<template #default="scope">
|
||||
<el-image
|
||||
:src="scope.row.picUrl"
|
||||
class="h-40px w-40px"
|
||||
:preview-src-list="[scope.row.picUrl]"
|
||||
preview-teleported
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品标题" prop="spuName" min-width="300" />
|
||||
<el-table-column
|
||||
label="原价"
|
||||
prop="marketPrice"
|
||||
min-width="100"
|
||||
:formatter="fenToYuanFormat"
|
||||
/>
|
||||
<el-table-column label="拼团价" prop="seckillPrice" min-width="100">
|
||||
<template #default="scope">
|
||||
{{ formatSeckillPrice(scope.row.products) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开团组数" prop="groupCount" min-width="100" />
|
||||
<el-table-column label="成团组数" prop="groupSuccessCount" min-width="100" />
|
||||
<el-table-column label="购买次数" prop="recordCount" min-width="100" />
|
||||
<el-table-column label="活动状态" align="center" prop="status" min-width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
<template #footer v-if="multiple">
|
||||
<el-button type="primary" @click="handleEmitChange">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { handleTree } from '@/utils/tree'
|
||||
|
||||
import * as ProductCategoryApi from '@/api/mall/product/category'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { CHANGE_EVENT } from 'element-plus'
|
||||
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
|
||||
import { fenToYuanFormat } from '@/utils/formatter'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { dateFormatter, formatDate } from '@/utils/formatTime'
|
||||
import { fenToYuan } from '@/utils'
|
||||
|
||||
type SeckillActivityVO = Required<SeckillActivityApi.SeckillActivityVO>
|
||||
|
||||
/**
|
||||
* 活动表格选择对话框
|
||||
* 1. 单选模式：
|
||||
* 1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
|
||||
* 1.2 再次打开时，保持选中状态
|
||||
* 2. 多选模式：
|
||||
* 2.1 点击表格左侧的多选框时，记录选中的活动
|
||||
* 2.2 切换分页时，保持活动的选中状态
|
||||
* 2.3 点击右下角的确定按钮时，结束选择，关闭对话框
|
||||
* 2.4 再次打开时，保持选中状态
|
||||
*/
|
||||
defineOptions({ name: 'SeckillTableSelect' })
|
||||
|
||||
defineProps({
|
||||
// 多选模式
|
||||
multiple: propTypes.bool.def(false)
|
||||
})
|
||||
|
||||
// 列表的总页数
|
||||
const total = ref(0)
|
||||
// 列表的数据
|
||||
const list = ref<SeckillActivityVO[]>([])
|
||||
// 列表的加载中
|
||||
const loading = ref(false)
|
||||
// 弹窗的是否展示
|
||||
const dialogVisible = ref(false)
|
||||
// 查询参数
|
||||
const queryParams = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
status: undefined
|
||||
})
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = (SeckillList?: SeckillActivityVO[]) => {
|
||||
// 重置
|
||||
checkedActivitys.value = []
|
||||
checkedStatus.value = {}
|
||||
isCheckAll.value = false
|
||||
isIndeterminate.value = false
|
||||
|
||||
// 处理已选中
|
||||
if (SeckillList && SeckillList.length > 0) {
|
||||
checkedActivitys.value = [...SeckillList]
|
||||
checkedStatus.value = Object.fromEntries(SeckillList.map((activityVO) => [activityVO.id, true]))
|
||||
}
|
||||
|
||||
dialogVisible.value = true
|
||||
resetQuery()
|
||||
}
|
||||
// 提供 open 方法，用于打开弹窗
|
||||
defineExpose({ open })
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await SeckillActivityApi.getSeckillActivityPage(queryParams.value)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
// checkbox绑定undefined会有问题，需要给一个bool值
|
||||
list.value.forEach(
|
||||
(activityVO) =>
|
||||
(checkedStatus.value[activityVO.id] = checkedStatus.value[activityVO.id] || false)
|
||||
)
|
||||
// 计算全选框状态
|
||||
calculateIsCheckAll()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryParams.value = {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
createTime: []
|
||||
}
|
||||
getList()
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化拼团价格
|
||||
* @param products
|
||||
*/
|
||||
const formatSeckillPrice = (products) => {
|
||||
const seckillPrice = Math.min(...products.map((item) => item.seckillPrice))
|
||||
return `￥${fenToYuan(seckillPrice)}`
|
||||
}
|
||||
|
||||
// 是否全选
|
||||
const isCheckAll = ref(false)
|
||||
// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
|
||||
const isIndeterminate = ref(false)
|
||||
// 选中的活动
|
||||
const checkedActivitys = ref<SeckillActivityVO[]>([])
|
||||
// 选中状态：key为活动ID，value为是否选中
|
||||
const checkedStatus = ref<Record<string, boolean>>({})
|
||||
|
||||
// 选中的活动 activityId
|
||||
const selectedActivityId = ref()
|
||||
/** 单选中时触发 */
|
||||
const handleSingleSelected = (seckillActivityVO: SeckillActivityVO) => {
|
||||
emits(CHANGE_EVENT, seckillActivityVO)
|
||||
// 关闭弹窗
|
||||
dialogVisible.value = false
|
||||
// 记住上次选择的ID
|
||||
selectedActivityId.value = seckillActivityVO.id
|
||||
}
|
||||
|
||||
/** 多选完成 */
|
||||
const handleEmitChange = () => {
|
||||
// 关闭弹窗
|
||||
dialogVisible.value = false
|
||||
emits(CHANGE_EVENT, [...checkedActivitys.value])
|
||||
}
|
||||
|
||||
/** 确认选择时的触发事件 */
|
||||
const emits = defineEmits<{
|
||||
change: [SeckillActivityApi: SeckillActivityVO | SeckillActivityVO[] | any]
|
||||
}>()
|
||||
|
||||
/** 全选/全不选 */
|
||||
const handleCheckAll = (checked: boolean) => {
|
||||
isCheckAll.value = checked
|
||||
isIndeterminate.value = false
|
||||
|
||||
list.value.forEach((seckillActivity) => handleCheckOne(checked, seckillActivity, false))
|
||||
}
|
||||
|
||||
/**
|
||||
* 选中一行
|
||||
* @param checked 是否选中
|
||||
* @param seckillActivity 活动
|
||||
* @param isCalcCheckAll 是否计算全选
|
||||
*/
|
||||
const handleCheckOne = (
|
||||
checked: boolean,
|
||||
seckillActivity: SeckillActivityVO,
|
||||
isCalcCheckAll: boolean
|
||||
) => {
|
||||
if (checked) {
|
||||
checkedActivitys.value.push(seckillActivity)
|
||||
checkedStatus.value[seckillActivity.id] = true
|
||||
} else {
|
||||
const index = findCheckedIndex(seckillActivity)
|
||||
if (index > -1) {
|
||||
checkedActivitys.value.splice(index, 1)
|
||||
checkedStatus.value[seckillActivity.id] = false
|
||||
isCheckAll.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 计算全选框状态
|
||||
if (isCalcCheckAll) {
|
||||
calculateIsCheckAll()
|
||||
}
|
||||
}
|
||||
|
||||
// 查找活动在已选中活动列表中的索引
|
||||
const findCheckedIndex = (activityVO: SeckillActivityVO) =>
|
||||
checkedActivitys.value.findIndex((item) => item.id === activityVO.id)
|
||||
|
||||
// 计算全选框状态
|
||||
const calculateIsCheckAll = () => {
|
||||
isCheckAll.value = list.value.every((activityVO) => checkedStatus.value[activityVO.id])
|
||||
// 计算中间状态：不是全部选中 && 任意一个选中
|
||||
isIndeterminate.value =
|
||||
!isCheckAll.value && list.value.some((activityVO) => checkedStatus.value[activityVO.id])
|
||||
}
|
||||
|
||||
// 分类列表
|
||||
const categoryList = ref()
|
||||
// 分类树
|
||||
const categoryTreeList = ref()
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
await getList()
|
||||
// 获得分类树
|
||||
categoryList.value = await ProductCategoryApi.getCategoryList({})
|
||||
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId')
|
||||
})
|
||||
</script>
|
||||
@@ -6,6 +6,11 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as MpAccountApi from '@/api/mp/account'
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { delView } = useTagsViewStore() // 视图操作
|
||||
const { push, currentRoute } = useRouter() // 路由
|
||||
|
||||
defineOptions({ name: 'WxAccountSelect' })
|
||||
|
||||
@@ -22,6 +27,12 @@ const emit = defineEmits<{
|
||||
|
||||
const handleQuery = async () => {
|
||||
accountList.value = await MpAccountApi.getSimpleAccountList()
|
||||
if (accountList.value.length == 0) {
|
||||
message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置')
|
||||
delView(unref(currentRoute))
|
||||
await push({ name: 'MpAccount' })
|
||||
return
|
||||
}
|
||||
// 默认选中第一个
|
||||
if (accountList.value.length > 0) {
|
||||
account.id = accountList.value[0].id
|
||||
|
||||
@@ -3,14 +3,7 @@
|
||||
<ContentWrap>
|
||||
<el-form class="-mb-15px" ref="queryForm" :inline="true" label-width="68px">
|
||||
<el-form-item label="公众号" prop="accountId">
|
||||
<el-select v-model="accountId" @change="getSummary" class="!w-240px">
|
||||
<el-option
|
||||
v-for="item in accountList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
<WxAccountSelect @change="onAccountChanged" />
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围" prop="dateRange">
|
||||
<el-date-picker
|
||||
@@ -76,7 +69,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { formatDate, addTime, betweenDay, beginOfDay, endOfDay } from '@/utils/formatTime'
|
||||
import * as StatisticsApi from '@/api/mp/statistics'
|
||||
import * as MpAccountApi from '@/api/mp/account'
|
||||
import WxAccountSelect from '@/views/mp/components/wx-account-select'
|
||||
|
||||
defineOptions({ name: 'MpStatistics' })
|
||||
|
||||
@@ -88,7 +81,6 @@ const dateRange = ref([
|
||||
endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
|
||||
])
|
||||
const accountId = ref(-1) // 选中的公众号编号
|
||||
const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
|
||||
|
||||
const xAxisDate = ref([] as any[]) // X 轴的日期范围
|
||||
// 用户增减数据图表配置项
|
||||
@@ -230,13 +222,10 @@ const interfaceSummaryOption = reactive({
|
||||
]
|
||||
})
|
||||
|
||||
/** 加载公众号账号的列表 */
|
||||
const getAccountList = async () => {
|
||||
accountList.value = await MpAccountApi.getSimpleAccountList()
|
||||
// 默认选中第一个
|
||||
if (accountList.value.length > 0) {
|
||||
accountId.value = accountList.value[0].id!
|
||||
}
|
||||
/** 侦听公众号变化 **/
|
||||
const onAccountChanged = (id: number) => {
|
||||
accountId.value = id
|
||||
getSummary()
|
||||
}
|
||||
|
||||
/** 加载数据 */
|
||||
@@ -357,12 +346,4 @@ const interfaceSummaryChart = async () => {
|
||||
})
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
// 获取公众号下拉列表
|
||||
await getAccountList()
|
||||
// 加载数据
|
||||
getSummary()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -231,7 +231,7 @@ const getDetail = async () => {
|
||||
goReturnUrl('cancel')
|
||||
return
|
||||
}
|
||||
const data = await PayOrderApi.getOrder(id.value)
|
||||
const data = await PayOrderApi.getOrder(id.value, true)
|
||||
payOrder.value = data
|
||||
// 1.2 无法查询到支付信息
|
||||
if (!data) {
|
||||
|
||||
@@ -6,9 +6,10 @@
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getAccessToken } from '@/utils/auth'
|
||||
import { getRefreshToken } from '@/utils/auth'
|
||||
|
||||
defineOptions({ name: 'JimuReport' })
|
||||
|
||||
const src = ref(import.meta.env.VITE_BASE_URL + '/jmreport/list?token=' + getAccessToken())
|
||||
// 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：积木报表无法方便的刷新访问令牌
|
||||
const src = ref(import.meta.env.VITE_BASE_URL + '/jmreport/list?token=' + getRefreshToken())
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user