fix: 产品自测与bug修改
This commit is contained in:
leiqiaochu
parent
ff52a91888
commit
f4baea0f8f
|
|
@ -23,8 +23,8 @@
|
|||
|
||||
<a-descriptions-item label="接入方式">
|
||||
<a-button type="link" @click="changeTables">{{
|
||||
productStore.current.transportProtocol
|
||||
? productStore.current.transportProtocol
|
||||
productStore.current.accessName
|
||||
? productStore.current.accessName
|
||||
: '配置接入方式'
|
||||
}}</a-button>
|
||||
</a-descriptions-item>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,30 @@
|
|||
<!-- 设备接入 -->
|
||||
<template>
|
||||
<a-card style="min-height: 100%">
|
||||
<j-card style="min-height: 100%">
|
||||
<div v-if="productStore.current.accessId === undefined || null">
|
||||
<a-empty :image="simpleImage">
|
||||
<j-empty :image="simpleImage">
|
||||
<template #description>
|
||||
<span v-if="permissionStore.hasPermission('device/Product:update')">
|
||||
请先<a-button type="link" @click="showModal"
|
||||
>选择</a-button
|
||||
<span
|
||||
v-if="
|
||||
permissionStore.hasPermission(
|
||||
'device/Product:update',
|
||||
)
|
||||
"
|
||||
>
|
||||
请先<j-button type="link" @click="showModal"
|
||||
>选择</j-button
|
||||
>设备接入网关，用以提供设备接入能力
|
||||
</span>
|
||||
<span v-else>暂无权限，请联系管理员</span>
|
||||
</template>
|
||||
</a-empty>
|
||||
</j-empty>
|
||||
</div>
|
||||
<div v-else>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<Title data="接入方式">
|
||||
<template #extra>
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
:title="
|
||||
productStore.current?.count &&
|
||||
productStore.current?.count > 0
|
||||
|
|
@ -26,7 +32,7 @@
|
|||
: ''
|
||||
"
|
||||
>
|
||||
<a-button
|
||||
<j-button
|
||||
style="margin: 0 0 0 20px"
|
||||
size="small"
|
||||
:disabled="
|
||||
|
|
@ -35,9 +41,9 @@
|
|||
"
|
||||
type="primary"
|
||||
@click="showDevice"
|
||||
>更换</a-button
|
||||
>更换</j-button
|
||||
>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</Title>
|
||||
<div>
|
||||
|
|
@ -71,13 +77,13 @@
|
|||
v-for="item in access?.channelInfo?.addresses"
|
||||
:key="item.address"
|
||||
>
|
||||
<a-badge
|
||||
<j-badge
|
||||
:color="
|
||||
item.health === -1 ? 'red' : 'green'
|
||||
"
|
||||
:text="item.address"
|
||||
>
|
||||
</a-badge>
|
||||
</j-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>{{ '暂无连接信息' }}</div>
|
||||
|
|
@ -88,95 +94,100 @@
|
|||
class="config"
|
||||
>
|
||||
<template #extra>
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
title="此配置来自于产品接入方式所选择的协议"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</Title>
|
||||
<a-form
|
||||
<j-form
|
||||
ref="formRef"
|
||||
:model="formData.data"
|
||||
layout="vertical"
|
||||
>
|
||||
<div v-for="item in metadata.properties" :key="item">
|
||||
<a-form-item
|
||||
:label="item.name"
|
||||
:rules="[
|
||||
{
|
||||
required:
|
||||
!!item?.type?.expands?.required,
|
||||
message: `${
|
||||
item.type.type === 'enum'
|
||||
? '请选择'
|
||||
: '请输入'
|
||||
}${item.name}`,
|
||||
},
|
||||
]"
|
||||
<j-form-item
|
||||
:name="item.property"
|
||||
v-for="item in metadata.properties"
|
||||
:key="item"
|
||||
:label="item.name"
|
||||
:rules="[
|
||||
{
|
||||
required: !!item?.type?.expands?.required,
|
||||
message: `${
|
||||
item.type.type === 'enum'
|
||||
? '请选择'
|
||||
: '请输入'
|
||||
}${item.name}`,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<j-input
|
||||
placeholder="请输入"
|
||||
v-if="item.type.type === 'string'"
|
||||
v-model:value="formData.data[item.property]"
|
||||
></j-input>
|
||||
<j-input-password
|
||||
placeholder="请输入"
|
||||
v-if="item.type.type === 'password'"
|
||||
v-model:value="formData.data[item.property]"
|
||||
></j-input-password>
|
||||
<j-select
|
||||
placeholder="请选择"
|
||||
v-if="item.type.type === 'enum'"
|
||||
v-model:value="formData.data[item.name]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入"
|
||||
v-if="item.type.type === 'string'"
|
||||
v-model:value="formData.data[item.name]"
|
||||
></a-input>
|
||||
<a-input-password
|
||||
placeholder="请输入"
|
||||
v-if="item.type.type === 'password'"
|
||||
v-model:value="formData.data[item.name]"
|
||||
></a-input-password>
|
||||
<a-select
|
||||
placeholder="请选择"
|
||||
v-if="item.type.type === 'enum'"
|
||||
v-model:value="formData.data[item.name]"
|
||||
<j-select-option
|
||||
v-for="el in item?.type?.type === 'enum' &&
|
||||
item?.type?.elements
|
||||
? item?.type?.elements
|
||||
: []"
|
||||
:key="el"
|
||||
:value="el.value"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="el in item?.type?.type ===
|
||||
'enum' && item?.type?.elements
|
||||
? item?.type?.elements
|
||||
: []"
|
||||
:key="el"
|
||||
:value="el.value"
|
||||
>
|
||||
{{ el.text }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
{{ el.text }}
|
||||
</j-select-option>
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
<Title data="存储策略">
|
||||
<template #extra>
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
title="若修改存储策略,需要手动做数据迁移,平台只能搜索最新存储策略中的数据"
|
||||
>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</Title>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item>
|
||||
<a-select
|
||||
<j-form layout="vertical">
|
||||
<j-form-item>
|
||||
<j-select
|
||||
ref="select"
|
||||
v-model:value="form.storePolicy"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="(item, index) in storageList"
|
||||
:key="index"
|
||||
:value="item.id"
|
||||
>{{ item.name }}</a-select-option
|
||||
>{{ item.name }}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<PermissionButton type="primary" @click="submitDevice" hasPermission="device/Instance:update">保存</PermissionButton>
|
||||
</a-col>
|
||||
<a-col
|
||||
</j-select>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="submitDevice"
|
||||
hasPermission="device/Instance:update"
|
||||
>保存</PermissionButton
|
||||
>
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="12"
|
||||
v-if="config?.routes && config?.routes?.length > 0"
|
||||
>
|
||||
|
|
@ -191,7 +202,7 @@
|
|||
: 'URL信息'
|
||||
}}
|
||||
</div>
|
||||
<a-table
|
||||
<j-table
|
||||
:columns="
|
||||
config.id === 'MQTT'
|
||||
? columnsMQTT
|
||||
|
|
@ -203,14 +214,14 @@
|
|||
>
|
||||
<template #bodyCell="{ text, column, record }">
|
||||
<template v-if="column.key === 'topic'">
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'stream'">
|
||||
<div>{{ getStream(record) }}</div>
|
||||
|
|
@ -218,45 +229,45 @@
|
|||
<template
|
||||
v-if="column.key === 'description'"
|
||||
>
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'address'">
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'example'">
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
placement="topLeft"
|
||||
:title="text"
|
||||
>
|
||||
<div class="ellipsis-style">
|
||||
{{ text }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</j-table>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</a-card>
|
||||
</j-card>
|
||||
<!-- 选择设备 -->
|
||||
<a-modal
|
||||
<j-modal
|
||||
title="设备接入配置"
|
||||
:visible="visible"
|
||||
width="1200px"
|
||||
|
|
@ -265,16 +276,16 @@
|
|||
@ok="submitData"
|
||||
@cancel="cancel"
|
||||
>
|
||||
<Search
|
||||
<j-advanced-search
|
||||
:columns="query.columns"
|
||||
target="deviceModal"
|
||||
@search="search"
|
||||
/>
|
||||
<JProTable
|
||||
:columns="columns"
|
||||
:columns="query.columns"
|
||||
:request="queryList"
|
||||
ref="tableRef"
|
||||
modal="card"
|
||||
model="CARD"
|
||||
:defaultParams="{
|
||||
...temp,
|
||||
sorts: [
|
||||
|
|
@ -288,8 +299,8 @@
|
|||
:gridColumns="[2]"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button type="primary" @click="add"
|
||||
><plus-outlined />新增</a-button
|
||||
<j-button type="primary" @click="add"
|
||||
><plus-outlined />新增</j-button
|
||||
>
|
||||
</template>
|
||||
<template #deviceType="slotProps">
|
||||
|
|
@ -314,22 +325,35 @@
|
|||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3 style="font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<Ellipsis style="width: calc(100% - 100px)">
|
||||
<h3 style="font-weight: 600">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
</Ellipsis>
|
||||
<j-row>
|
||||
<j-col :span="12" v-if="slotProps.channelInfo">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
{{ slotProps.channelInfo?.name }}
|
||||
</div>
|
||||
<div>直连设备</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div>
|
||||
{{
|
||||
slotProps.channelInfo?.addresses
|
||||
? slotProps.channelInfo
|
||||
?.addresses[0].address
|
||||
: ''
|
||||
}}
|
||||
</div>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">协议</div>
|
||||
<div>{{ slotProps.protocolDetail?.name }}</div>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<a-badge
|
||||
<j-badge
|
||||
:text="slotProps.state === 1 ? '正常' : '禁用'"
|
||||
:status="statusMap.get(slotProps.state)"
|
||||
/>
|
||||
|
|
@ -338,13 +362,13 @@
|
|||
<a>{{ slotProps.id }}</a>
|
||||
</template>
|
||||
</JProTable>
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useProductStore } from '@/store/product';
|
||||
import { ConfigMetadata } from '@/views/device/Product/typings';
|
||||
import { Empty, message } from 'ant-design-vue';
|
||||
import { Empty, FormItem, message } from 'ant-design-vue';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import Title from '../Title/index.vue';
|
||||
import { usePermissionStore } from '@/store/permission';
|
||||
|
|
@ -370,6 +394,9 @@ import Driver from 'driver.js';
|
|||
import 'driver.js/dist/driver.min.css';
|
||||
import { marked } from 'marked';
|
||||
import type { FormInstance, TableColumnType } from 'ant-design-vue';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
const formRef = ref();
|
||||
const menuStore = useMenuStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
const render = new marked.Renderer();
|
||||
marked.setOptions({
|
||||
|
|
@ -396,7 +423,6 @@ const current = ref({
|
|||
name: productStore.current?.protocolName,
|
||||
},
|
||||
});
|
||||
|
||||
//存储数据
|
||||
const form = reactive<Record<string, any>>({
|
||||
storePolicy: 'default-row' || productStore.current?.storePolicy || '',
|
||||
|
|
@ -442,15 +468,14 @@ const query = reactive({
|
|||
},
|
||||
{
|
||||
title: '网关类型',
|
||||
key: 'accessProvider',
|
||||
dataIndex: 'accessProvider',
|
||||
key: 'provider',
|
||||
dataIndex: 'provider',
|
||||
search: {
|
||||
type: 'select',
|
||||
options: async () => {
|
||||
return new Promise((res) => {
|
||||
getProviders().then((resp: any) => {
|
||||
listData.value = [];
|
||||
// const list = () => {
|
||||
if (isNoCommunity) {
|
||||
listData.value = (resp?.result || []).map(
|
||||
(item: any) => ({
|
||||
|
|
@ -489,19 +514,19 @@ const query = reactive({
|
|||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: 1,
|
||||
value: 'enabled',
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 0,
|
||||
value: 'disabled',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: 'describe',
|
||||
dataIndex: 'describe',
|
||||
key: 'description',
|
||||
dataIndex: 'description',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
|
|
@ -820,7 +845,6 @@ const getStream = (record: any) => {
|
|||
* 查询接入方式
|
||||
*/
|
||||
const queryAccessDetail = async (id: string) => {
|
||||
console.log(id, 'id');
|
||||
const res = await queryList({
|
||||
terms: [
|
||||
{
|
||||
|
|
@ -896,7 +920,6 @@ const getProviderList = async () => {
|
|||
* 提交设备数据
|
||||
*/
|
||||
const submitData = async () => {
|
||||
console.log(current.value, 'vvv');
|
||||
if (current.value) {
|
||||
const obj: any = {
|
||||
...productStore.current,
|
||||
|
|
@ -938,7 +961,6 @@ const submitData = async () => {
|
|||
? await updateDevice(obj)
|
||||
: await saveDevice(obj);
|
||||
if (resp.status === 200) {
|
||||
console.log(productStore.current?.id, 'productStore.current?.id');
|
||||
detail(productStore.current?.id || '').then((res) => {
|
||||
if (res.status === 200) {
|
||||
productStore.current = { ...res.result };
|
||||
|
|
@ -1015,10 +1037,12 @@ const getData = async () => {
|
|||
* 保存设备接入
|
||||
*/
|
||||
const submitDevice = async () => {
|
||||
const res = await formRef.value.validate();
|
||||
const values = { storePolicy: form.storePolicy, ...formData.data };
|
||||
const result: any = {};
|
||||
flatObj(values, result);
|
||||
const { storePolicy, ...extra } = result;
|
||||
console.log({...extra});
|
||||
const id = productStore.current?.id;
|
||||
const resp = await modify(id || '', {
|
||||
id: id,
|
||||
|
|
@ -1047,6 +1071,13 @@ const flatObj = (obj: any, result: any) => {
|
|||
});
|
||||
};
|
||||
const getDetailInfo = () => {};
|
||||
|
||||
const add = () => {
|
||||
const url = menuStore.hasMenu('link/AccessConfig/Detail');
|
||||
if (url) {
|
||||
window.open(`${origin}/#${url}`);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -10,60 +10,75 @@
|
|||
<div style="display: flex; align-items: center">
|
||||
<div>{{ productStore.current.name }}</div>
|
||||
<div style="margin: -5px 0 0 20px">
|
||||
<a-popconfirm
|
||||
<j-popconfirm
|
||||
title="确认禁用"
|
||||
@confirm="handleUndeploy"
|
||||
v-if="productStore.current.state === 1"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<a-switch
|
||||
<j-switch
|
||||
:checked="productStore.current.state === 1"
|
||||
checked-children="正常"
|
||||
un-checked-children="禁用"
|
||||
/>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm
|
||||
</j-popconfirm>
|
||||
<j-popconfirm
|
||||
title="确认启用"
|
||||
@confirm="handleDeploy"
|
||||
v-if="productStore.current.state === 0"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<a-switch
|
||||
<j-switch
|
||||
:unCheckedValue="
|
||||
productStore.current.state === 0
|
||||
"
|
||||
checked-children="正常"
|
||||
un-checked-children="禁用"
|
||||
/>
|
||||
</a-popconfirm>
|
||||
</j-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-top: 10px">
|
||||
<a-descriptions size="small" :column="4">
|
||||
<a-descriptions-item label="设备数量">{{
|
||||
<j-descriptions size="small" :column="4">
|
||||
<j-descriptions-item label="设备数量">{{
|
||||
productStore.current?.count
|
||||
? productStore.current?.count
|
||||
: 0
|
||||
}}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
}}</j-descriptions-item>
|
||||
</j-descriptions>
|
||||
</div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-popconfirm
|
||||
title="确认应用配置"
|
||||
@confirm="handleCofig"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<a-button
|
||||
:disabled="productStore.current.state === 0"
|
||||
type="primary"
|
||||
>应用配置</a-button
|
||||
<!-- <j-popconfirm
|
||||
title="确认应用配置"
|
||||
@confirm="handleCofig"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
</a-popconfirm>
|
||||
<j-button
|
||||
:disabled="productStore.current.state === 0"
|
||||
type="primary"
|
||||
>应用配置</j-button
|
||||
>
|
||||
</j-popconfirm> -->
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
:popConfirm="{
|
||||
title: `确定应用配置?`,
|
||||
onConfirm: handleConfig,
|
||||
}"
|
||||
:disabled="productStore.current?.state === 0"
|
||||
:tooltip="
|
||||
productStore.current?.state === 0
|
||||
? { title: '请先启用产品' }
|
||||
: undefined
|
||||
"
|
||||
hasPermission="device/Product:update"
|
||||
>应用配置</PermissionButton
|
||||
>
|
||||
</template>
|
||||
<component
|
||||
:is="tabs[productStore.tabActiveKey]"
|
||||
|
|
@ -123,7 +138,7 @@ const tabs = {
|
|||
Info,
|
||||
Metadata,
|
||||
Device,
|
||||
DataAnalysis
|
||||
DataAnalysis,
|
||||
};
|
||||
|
||||
watch(
|
||||
|
|
@ -189,7 +204,7 @@ const handleUndeploy = async () => {
|
|||
*/
|
||||
const getProtocol = async () => {
|
||||
if (productStore.current?.messageProtocol) {
|
||||
const res:any = await getProtocolDetail(
|
||||
const res: any = await getProtocolDetail(
|
||||
productStore.current?.messageProtocol,
|
||||
);
|
||||
if (res.status === 200) {
|
||||
|
|
@ -205,9 +220,9 @@ const getProtocol = async () => {
|
|||
}
|
||||
}
|
||||
};
|
||||
onMounted(()=>{
|
||||
onMounted(() => {
|
||||
getProtocol();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.ant-switch-loading,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 新增、编辑产品 -->
|
||||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
:title="props.title"
|
||||
:maskClosable="false"
|
||||
destroy-on-close
|
||||
|
|
@ -14,18 +14,18 @@
|
|||
:confirmLoading="loading"
|
||||
>
|
||||
<div style="margin-top: 10px">
|
||||
<a-form
|
||||
<j-form
|
||||
:layout="'vertical'"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
>
|
||||
<a-row type="flex">
|
||||
<a-col flex="180px">
|
||||
<a-form-item name="photoUrl">
|
||||
<j-row type="flex">
|
||||
<j-col flex="180px">
|
||||
<j-form-item name="photoUrl">
|
||||
<JUpload v-model="form.photoUrl" />
|
||||
</a-form-item>
|
||||
<!-- <a-form-item>
|
||||
</j-form-item>
|
||||
<!-- <j-form-item>
|
||||
<div class="upload-image-warp-logo">
|
||||
<div class="upload-image-border-logo">
|
||||
<a-upload
|
||||
|
|
@ -89,37 +89,37 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item> -->
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
<a-form-item name="id">
|
||||
</j-form-item> -->
|
||||
</j-col>
|
||||
<j-col flex="auto">
|
||||
<j-form-item name="id">
|
||||
<template #label>
|
||||
<span>ID</span>
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
title="若不填写，系统将自动生成唯一ID"
|
||||
>
|
||||
<span>ID</span>
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.id"
|
||||
placeholder="请输入ID"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="名称" name="name">
|
||||
<a-input
|
||||
</j-form-item>
|
||||
<j-form-item label="名称" name="name">
|
||||
<j-input
|
||||
v-model:value="form.name"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item label="产品分类" name="classifiedId">
|
||||
<a-tree-select
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-form-item label="产品分类" name="classifiedId">
|
||||
<j-tree-select
|
||||
showSearch
|
||||
v-model:value="form.classifiedId"
|
||||
placeholder="请选择产品分类"
|
||||
|
|
@ -131,40 +131,40 @@
|
|||
"
|
||||
>
|
||||
<template> </template>
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="设备类型" name="deviceType">
|
||||
<a-radio-group
|
||||
</j-tree-select>
|
||||
</j-form-item>
|
||||
<j-form-item label="设备类型" name="deviceType">
|
||||
<j-radio-group
|
||||
v-model:value="form.deviceType"
|
||||
style="width: 100%"
|
||||
@change="changeValue"
|
||||
>
|
||||
<a-row :span="24" :gutter="10">
|
||||
<a-col
|
||||
<j-row :span="24" :gutter="10">
|
||||
<j-col
|
||||
:span="8"
|
||||
v-for="item in deviceList"
|
||||
:key="item.value"
|
||||
>
|
||||
<div class="button-style">
|
||||
<a-radio-button
|
||||
<j-radio-button
|
||||
:value="item.value"
|
||||
style="height: 100%; width: 100%"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<div class="card-content">
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="10">
|
||||
<j-row :gutter="20">
|
||||
<j-col :span="10">
|
||||
<!-- 图片 -->
|
||||
<div class="img-style">
|
||||
<img :src="item.logo" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
</j-col>
|
||||
<j-col :span="14">
|
||||
<span class="card-style">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
|
||||
<!-- 勾选 -->
|
||||
<div
|
||||
|
|
@ -179,21 +179,21 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-radio-button>
|
||||
</j-radio-button>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="describe">
|
||||
<a-textarea
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-radio-group>
|
||||
</j-form-item>
|
||||
<j-form-item label="说明" name="describe">
|
||||
<j-textarea
|
||||
v-model:value="form.describe"
|
||||
placeholder="请输入说明"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</div>
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
<DialogTips ref="dialogRef" />
|
||||
</template>
|
||||
|
||||
|
|
@ -275,6 +275,7 @@ const form = reactive({
|
|||
*/
|
||||
const validateInput = async (_rule: Rule, value: string) => {
|
||||
if (value) {
|
||||
console.log(value.split('').length);
|
||||
if (!isInput(value)) {
|
||||
return Promise.reject('请输入英文或者数字或者-或者_');
|
||||
} else {
|
||||
|
|
@ -302,8 +303,14 @@ const validateDeviceType = async (_rule: Rule, value: string) => {
|
|||
}
|
||||
};
|
||||
const rules = reactive({
|
||||
id: [{ validator: validateInput, trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
id: [
|
||||
{ validator: validateInput, trigger: 'blur' },
|
||||
{ max: 64, message: '最多可输入64位字符', trigger: 'change' },
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||||
{ max: 64, message: '最多可输入64位字符', trigger: 'change' },
|
||||
],
|
||||
deviceType: [
|
||||
{
|
||||
required: true,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<Search
|
||||
<j-advanced-search
|
||||
:columns="query.columns"
|
||||
target="product-manage"
|
||||
@search="handleSearch"
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<Ellipsis
|
||||
<Ellipsis style="width:calc(100% - 100px)"
|
||||
><span
|
||||
@click.stop="handleView(slotProps.id)"
|
||||
style="font-weight: 600; font-size: 16px"
|
||||
|
|
@ -72,64 +72,26 @@
|
|||
{{ slotProps.name }}
|
||||
</span></Ellipsis
|
||||
>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<div>{{ slotProps?.deviceType?.text }}</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
接入方式
|
||||
</div>
|
||||
<Ellipsis
|
||||
><div>
|
||||
{{ slotProps?.accessName }}
|
||||
{{ slotProps?.accessName ? slotProps?.accessName : '未接入' }}
|
||||
</div></Ellipsis
|
||||
>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<!-- <a-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
>
|
||||
<a-popconfirm
|
||||
v-if="item.popConfirm"
|
||||
v-bind="item.popConfirm"
|
||||
:disabled="item.disabled"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<a-button :disabled="item.disabled">
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<template v-else>
|
||||
<a-button
|
||||
:disabled="item.disabled"
|
||||
@click="item.onClick"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
</a-tooltip> -->
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
|
|
@ -152,7 +114,7 @@
|
|||
</CardBox>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<a-badge
|
||||
<j-badge
|
||||
:text="slotProps.state === 1 ? '正常' : '禁用'"
|
||||
:status="statusMap.get(slotProps.state)"
|
||||
/>
|
||||
|
|
@ -161,39 +123,7 @@
|
|||
<a>{{ slotProps.id }}</a>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<!-- <a-tooltip
|
||||
v-for="i in getActions(slotProps)"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-popconfirm
|
||||
v-if="i.popConfirm"
|
||||
v-bind="i.popConfirm"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-button>
|
||||
</a-tooltip> -->
|
||||
<j-space :size="16">
|
||||
<template
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
|
|
@ -212,7 +142,7 @@
|
|||
<template #icon><AIcon :type="i.icon" /></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</a-space>
|
||||
</j-space>
|
||||
</template>
|
||||
</JProTable>
|
||||
<!-- 新增、编辑 -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue