Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

This commit is contained in:
jackhoo_98 2023-03-29 12:30:01 +08:00
commit 14634e0fec
12 changed files with 116 additions and 92 deletions

View File

@ -76,5 +76,9 @@
"**/*.{html,css,less,md}": [ "**/*.{html,css,less,md}": [
"prettier --write" "prettier --write"
] ]
},
"volta": {
"node": "18.14.0",
"yarn": "1.22.0"
} }
} }

View File

@ -12,7 +12,7 @@
<div class="box-item"> <div class="box-item">
<div class="label">设备数量</div> <div class="label">设备数量</div>
<div class="value">{{ deviceNum }}</div> <div class="value">{{ deviceNum }}</div>
<img src="/images/home/Group 3793.png" alt="" /> <img src="/images/home/Group3793.png" alt="" />
</div> </div>
</div> </div>
</div> </div>

View File

@ -42,6 +42,17 @@
:disabled="type === 'edit'" :disabled="type === 'edit'"
/> />
</j-form-item> </j-form-item>
<j-form-item label="运营商" name="operatorName">
<j-select
allowClear
showSearch
:filter-option="filterOption"
:options="OperatorList"
v-model:value="modelRef.operatorName"
placeholder="请选择运营商"
>
</j-select>
</j-form-item>
<j-form-item label="平台对接" name="platformConfigId"> <j-form-item label="平台对接" name="platformConfigId">
<j-select <j-select
showSearch showSearch
@ -55,17 +66,7 @@
</j-select> </j-select>
</j-form-item> </j-form-item>
<j-form-item label="运营商" name="operatorName">
<j-select
allowClear
showSearch
:filter-option="filterOption"
:options="OperatorList"
v-model:value="modelRef.operatorName"
placeholder="请选择运营商"
>
</j-select>
</j-form-item>
<j-form-item label="类型" name="cardType"> <j-form-item label="类型" name="cardType">
<j-select <j-select
allowClear allowClear
@ -113,7 +114,7 @@ const props = defineProps({
}); });
const btnLoading = ref<boolean>(false); const btnLoading = ref<boolean>(false);
const platformConfigList = ref<Record<string, any>[]>([]); const platformConfigCacheList = ref<Record<string, any>[]>([]);
const formRef = ref(); const formRef = ref();
@ -184,6 +185,12 @@ const rules = {
message: '请选择平台对接', message: '请选择平台对接',
}, },
], ],
operatorName: [
{
required: true,
message: '请选择运营商',
},
],
cardType: [ cardType: [
{ {
required: true, required: true,
@ -200,6 +207,10 @@ const filterOption = (input: string, option: any) => {
); );
}; };
const platformConfigList = computed(() => {
return platformConfigCacheList.value.filter(item => item.operatorName === modelRef.operatorName).map(item => ({ label: item.name, value: item.id }))
})
watch( watch(
() => props.data, () => props.data,
(newValue) => { (newValue) => {
@ -209,10 +220,7 @@ watch(
terms: [{ column: 'state', value: 'enabled' }], terms: [{ column: 'state', value: 'enabled' }],
}).then((resp: any) => { }).then((resp: any) => {
if (resp.status === 200) { if (resp.status === 200) {
platformConfigList.value = resp.result.map((item: any) => ({ platformConfigCacheList.value = resp.result
label: item.name,
value: item.id,
}));
} }
}); });
Object.assign(modelRef, newValue); Object.assign(modelRef, newValue);

View File

@ -156,11 +156,11 @@
</slot> </slot>
</template> </template>
<template #content> <template #content>
<span style="font-size: 16px; font-weight: 600">
<Ellipsis style="width: calc(100% - 100px)"> <Ellipsis style="width: calc(100% - 100px)">
<span style="font-size: 16px; font-weight: 600">
{{ slotProps.id }} {{ slotProps.id }}
</span>
</Ellipsis> </Ellipsis>
</span>
<j-row style="margin-top: 20px"> <j-row style="margin-top: 20px">
<j-col :span="8"> <j-col :span="8">
<div class="card-item-content-text"> <div class="card-item-content-text">
@ -307,6 +307,9 @@
}} }}
</div> </div>
</template> </template>
<template #operatorName='slotProps'>
{{ OperatorMap[slotProps.operatorName]}}
</template>
<template #cardType="slotProps"> <template #cardType="slotProps">
{{ slotProps.cardType.text }} {{ slotProps.cardType.text }}
</template> </template>
@ -423,6 +426,7 @@ import BatchDropdown from '@/components/BatchDropdown/index.vue';
import { BatchActionsType } from '@/components/BatchDropdown/types'; import { BatchActionsType } from '@/components/BatchDropdown/types';
import {usePermissionStore} from "store/permission"; import {usePermissionStore} from "store/permission";
import {useRouterParams} from "@/utils/hooks/useParams"; import {useRouterParams} from "@/utils/hooks/useParams";
import { OperatorList, OperatorMap } from '@/views/iot-card/data'
const router = useRouter(); const router = useRouter();
const menuStory = useMenuStore(); const menuStory = useMenuStore();
@ -505,11 +509,7 @@ const columns = [
width: 120, width: 120,
search: { search: {
type: 'select', type: 'select',
options: [ options: OperatorList,
{ label: '移动', value: '移动' },
{ label: '电信', value: '电信' },
{ label: '联通', value: '联通' },
],
}, },
}, },
{ {

View File

@ -130,11 +130,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { getImage } from '@/utils/comm';
import PlatformType from '@/views/iot-card/components/PlatformType.vue'; import PlatformType from '@/views/iot-card/components/PlatformType.vue';
import { queryById, save, update } from '@/api/iot-card/platform'; import { queryById, save, update } from '@/api/iot-card/platform';
import { message } from 'jetlinks-ui-components'; import { message } from 'jetlinks-ui-components';
import Doc from '../doc/index.vue'; import Doc from '../doc/index.vue';
import { platformTypeList } from '../../data'
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -158,27 +158,6 @@ const form = reactive({
explain: undefined, explain: undefined,
}); });
const platformTypeList = [
{
label: '移动OneLink',
value: 'onelink',
imgUrl: getImage('/iot-card/onelink.png'),
imgSize: ['78px', '20px'],
},
{
label: '电信Ctwing',
value: 'ctwing',
imgUrl: getImage('/iot-card/ctwingcmp.png'),
imgSize: ['52px', '25px'],
},
{
label: '联通Unicom',
value: 'unicom',
imgUrl: getImage('/iot-card/unicom.png'),
imgSize: ['56px', '41px'],
},
];
const rules = { const rules = {
name: [ name: [
{ required: true, message: '请输入名称' }, { required: true, message: '请输入名称' },

View File

@ -27,7 +27,9 @@
</template> </template>
<template #content> <template #content>
<h3 class="card-item-content-title"> <h3 class="card-item-content-title">
<Ellipsis>
{{ slotProps.name }} {{ slotProps.name }}
</Ellipsis>
</h3> </h3>
<j-row> <j-row>
<j-col :span="12"> <j-col :span="12">

View File

@ -1,37 +1,46 @@
import { getImage } from '@/utils/comm'; import { getImage } from '@/utils/comm';
// 平台类型 // 平台类型
export const PlatformTypeList = [ export const platformTypeList = [
{ {
label: '移动OneLink', label: '移动OneLink',
value: 'OneLinkPB', value: 'onelink',
imgUrl: getImage('/iot-card/onelink.png'), imgUrl: getImage('/iot-card/onelink.png'),
imgSize: ['78px', '20px'],
}, },
{ {
label: '电信Ctwing', label: '电信Ctwing',
value: 'CtwingCmp', value: 'ctwing',
imgUrl: getImage('/iot-card/ctwingcmp.png'), imgUrl: getImage('/iot-card/ctwingcmp.png'),
imgSize: ['52px', '25px'],
}, },
{ {
label: '联通Unicom', label: '联通Unicom',
value: 'UnicomCmp', value: 'unicom',
imgUrl: getImage('/iot-card/unicom.png'), imgUrl: getImage('/iot-card/unicom.png'),
imgSize: ['56px', '41px'],
}, },
]; ];
export const OperatorMap = {
onelink: '移动',
ctwing: '电信',
unicom: '联通',
}
//运营商 //运营商
export const OperatorList = [ export const OperatorList = [
{ {
label: '移动', label: '移动',
value: '移动', value: 'onelink',
}, },
{ {
label: '电信', label: '电信',
value: '电信', value: 'ctwing',
}, },
{ {
label: '联通', label: '联通',
value: '联通', value: 'unicom',
}, },
]; ];

View File

@ -47,9 +47,15 @@
> >
<j-button type="primary" disabled> 新增 </j-button> <j-button type="primary" disabled> 新增 </j-button>
</j-tooltip> </j-tooltip>
<j-button type="primary" @click="handleAdd" v-else> <PermissionButton
新增 type="primary"
</j-button> @click="handleAdd"
hasPermission="media/Device:add"
>
<template #icon
><AIcon type="PlusOutlined" />新增</template
>
</PermissionButton>
</template> </template>
<template #status="slotProps"> <template #status="slotProps">
<j-space> <j-space>
@ -64,41 +70,52 @@
</j-space> </j-space>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<j-space :size="16"> <j-space>
<j-tooltip <template
v-for="i in getActions(slotProps, 'table')" v-for="i in getActions(slotProps, 'table')"
:key="i.key" :key="i.key"
v-bind="i.tooltip"
> >
<j-popconfirm <PermissionButton
v-if="i.popConfirm" v-if="
v-bind="i.popConfirm" i.key !== 'play' && i.key !== 'backPlay'
"
:danger="i.key === 'delete'"
:disabled="i.disabled" :disabled="i.disabled"
> :popConfirm="i.popConfirm"
<j-button :tooltip="{
:disabled="i.disabled" ...i.tooltip,
style="padding: 0" }"
type="link" @click="i.onClick"
:danger="i.key === 'delete'"
>
<AIcon :type="i.icon" />
</j-button>
</j-popconfirm>
<j-button
style="padding: 0"
type="link" type="link"
v-else style="padding: 0px"
@click="i.onClick && i.onClick(slotProps)" :hasPermission="'media/Device:' + i.key"
> >
<j-button <template #icon
:disabled="i.disabled" ><AIcon :type="i.icon"
style="padding: 0" /></template>
type="link" </PermissionButton>
> <!-- 回放/播放不要权限控制 -->
<AIcon :type="i.icon" /> <template v-else>
</j-button> <j-tooltip :key="i.key" v-bind="i.tooltip">
</j-button> <j-button
</j-tooltip> style="padding: 0px"
type="link"
@click="
i.onClick &&
i.onClick(slotProps)
"
>
<j-button
:disabled="i.disabled"
style="padding: 0"
type="link"
>
<AIcon :type="i.icon" />
</j-button>
</j-button>
</j-tooltip>
</template>
</template>
</j-space> </j-space>
</template> </template>
</JProTable> </JProTable>
@ -216,7 +233,7 @@ const getActions = (
if (!data) return []; if (!data) return [];
const actions = [ const actions = [
{ {
key: 'edit', key: 'update',
text: '编辑', text: '编辑',
tooltip: { tooltip: {
title: '编辑', title: '编辑',

View File

@ -325,7 +325,7 @@ const table = {
onClick: () => table.toSave(data.id), onClick: () => table.toSave(data.id),
}, },
{ {
permission: `${permission}:update`, permission: `${permission}:action`,
key: 'action', key: 'action',
text: disabled ? '禁用' : '启用', text: disabled ? '禁用' : '启用',
tooltip: { tooltip: {

View File

@ -336,14 +336,14 @@ const table = {
else else
return [ return [
{ {
permission: true, permission: `${permission}:assert`,
key: 'edit', key: 'edit',
tooltip: { title: '编辑' }, tooltip: { title: '编辑' },
icon: 'EditOutlined', icon: 'EditOutlined',
onClick: () => table.clickEdit(data), onClick: () => table.clickEdit(data),
}, },
{ {
permission: true, permission: `${permission}:bind`,
key: 'unbind', key: 'unbind',
tooltip: { title: '解除绑定' }, tooltip: { title: '解除绑定' },
popConfirm: { popConfirm: {

View File

@ -345,7 +345,7 @@ const table = {
onClick: () => table.clickEdit(data), onClick: () => table.clickEdit(data),
}, },
{ {
permission: `${permission}:assert`, permission: `${permission}:bind`,
key: 'unbind', key: 'unbind',
tooltip: { title: '解除绑定' }, tooltip: { title: '解除绑定' },
popConfirm: { popConfirm: {

View File

@ -18,9 +18,14 @@
</j-pro-table> </j-pro-table>
</div> </div>
<j-button type="primary" @click="save" v-if="props.mode !== 'home'" <PermissionButton
>保存</j-button type="primary"
hasPermission="system/Platforms/Setting:update"
@click="save"
v-if="props.mode !== 'home'"
> >
保存
</PermissionButton>
</div> </div>
</template> </template>