fix: 修改scss为less,修复权限组件

This commit is contained in:
wangshuaiswim 2023-01-30 18:06:16 +08:00
parent 6abc69e1d8
commit 9a483a678d
6 changed files with 63 additions and 29 deletions

View File

@ -4,14 +4,14 @@
<a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
<a-tooltip v-if="tooltip" v-bind="tooltip">
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
<a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
<slot></slot>
<template #icon>
<slot name="icon"></slot>
</template>
</a-button>
</a-tooltip>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
<a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
<slot></slot>
<template #icon>
<slot name="icon"></slot>
@ -22,7 +22,7 @@
<template v-else-if="tooltip">
<a-tooltip v-bind="tooltip">
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
<a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
<slot></slot>
<template #icon>
<slot name="icon"></slot>
@ -32,7 +32,7 @@
</template>
<template v-else>
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
<a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
<slot></slot>
<template #icon>
<slot name="icon"></slot>
@ -42,7 +42,7 @@
</template>
<a-tooltip v-else title="没有权限">
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
<a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
<slot></slot>
<template #icon>
<slot name="icon"></slot>
@ -54,6 +54,12 @@
import type { ButtonProps, TooltipProps, PopconfirmProps } from 'ant-design-vue'
import { usePermissionStore } from '@/store/permission';
interface PermissionButtonEmits {
(e: 'click', data: MouseEvent): void;
}
const emits = defineEmits<PermissionButtonEmits>()
interface PermissionButtonProps extends ButtonProps {
tooltip?: TooltipProps;
popConfirm?: PopconfirmProps;
@ -80,6 +86,9 @@ const _isPermission = computed(() =>
: false
: true
)
const handleClick = (e: MouseEvent) => {
emits('click', e)
}
</script>
<style scoped lang="less">

View File

@ -114,6 +114,6 @@ const form = reactive({
model: {}
})
</script>
<style lang="scss" scoped>
<style lang="less" scoped>
</style>

View File

@ -96,5 +96,5 @@ const operateLimits = (action: 'add' | 'updata', types: MetadataType) => {
);
};
</script>
<style scoped lang="scss">
<style scoped lang="less">
</style>

View File

@ -140,7 +140,7 @@ watchEffect(() => {
}
})
</script>
<style scoped lang="scss">
<style scoped lang="less">
.cat-content {
background: #F6F6F6;

View File

@ -8,8 +8,8 @@
</p>
</div>
<a-form layout="vertical" v-model="formModel">
<a-form-item label="导入方式" v-bind="validateInfos.type">
<a-select v-if="type === 'product'" v-model:value="formModel.type">
<a-form-item v-if="type === 'product'" label="导入方式" v-bind="validateInfos.type">
<a-select v-model:value="formModel.type">
<a-select-option value="copy">拷贝产品</a-select-option>
<a-select-option value="import">导入物模型</a-select-option>
</a-select>
@ -32,11 +32,19 @@
</a-select>
</a-form-item>
<a-form-item label="文件上传" v-bind="validateInfos.upload" v-if="formModel.metadataType === 'file'">
<a-upload v-model:file-list="formModel.upload" name="files" :before-upload="beforeUpload" accept=".json"
:show-upload-list="false"></a-upload>
<a-input v-model:value="formModel.upload">
<template #addonAfter>
<label for="uploadFile"><upload-outlined/></label>
</template>
</a-input>
<a-upload v-model:file-list="fileList" name="files" :before-upload="beforeUpload" accept=".json"
:show-upload-list="false" :action="FILE_UPLOAD" @change="fileChange" :headers="{ 'X-Access-Token': token }">
<button id="uploadFile" style="display: none;"></button>
</a-upload>
</a-form-item>
<a-form-item label="物模型" v-bind="validateInfos.import" v-if="formModel.metadataType === 'script'">
<!-- TODO代码编辑器 -->
<a-textarea v-model:value="formModel.import"></a-textarea>
</a-form-item>
</a-form>
</a-modal>
@ -46,13 +54,17 @@ import { useForm } from 'ant-design-vue/es/form';
import { saveMetadata } from '@/api/device/instance'
import { queryNoPagingPost, convertMetadata, modify } from '@/api/device/product'
import type { DefaultOptionType } from 'ant-design-vue/es/select';
import { UploadProps } from 'ant-design-vue/es';
import type { UploadProps, UploadFile, UploadChangeParam } from 'ant-design-vue/es';
import type { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
import { message } from 'ant-design-vue/es';
import { Store } from 'jetlinks-store';
import { SystemConst } from '@/utils/consts';
import { useInstanceStore } from '@/store/instance'
import { useProductStore } from '@/store/product';
import { UploadOutlined } from '@ant-design/icons-vue';
import { FILE_UPLOAD } from '@/api/comm';
import { LocalStore } from '@/utils/comm';
import { TOKEN_KEY } from '@/utils/variable';
const route = useRoute()
const instanceStore = useInstanceStore()
@ -79,6 +91,7 @@ const _visible = computed({
})
const close = () => {
console.log(1)
emits('update:visible', false);
}
@ -132,6 +145,8 @@ const onSubmit = () => {
})
}
const fileList = ref<UploadFile[]>([])
const token = ref(LocalStore.get(TOKEN_KEY));
const productList = ref<DefaultOptionType[]>([])
@ -157,6 +172,11 @@ const beforeUpload: UploadProps['beforeUpload'] = file => {
formModel.import = json.target?.result;
};
}
const fileChange = (info: UploadChangeParam) => {
if (info.file.status === 'done') {
console.log(info)
}
}
const operateLimits = (mdata: DeviceMetadata) => {
const obj: DeviceMetadata = { ...mdata };
@ -257,7 +277,7 @@ const handleImport = async () => {
// const showProduct = computed(() => formModel.type === 'copy')
</script>
<style scoped lang="scss">
<style scoped lang="less">
.import-content {
background: rgb(236, 237, 238);

View File

@ -1,6 +1,6 @@
<template>
<div class='device-detail-metadata' style="position: relative;">
<div class="tips" style="width: 40%">
<div class="tips">
<a-tooltip :title="instanceStore.detail?.independentMetadata && type === 'device'
? '该设备已脱离产品物模型,修改产品物模型对该设备无影响'
: '设备会默认继承产品的物模型,修改设备物模型后将脱离产品物模型'">
@ -14,16 +14,20 @@
</div>
</a-tooltip>
</div>
<a-tabs class="metadataNav" destroyInactiveTabPane>
<a-tabs class="metadataNav" destroyInactiveTabPane type="card">
<template #rightExtra>
<a-space>
<PermissionButton v-if="type === 'device'" :hasPermission="`${permission}:update`"
:popConfirm="{ title: '确认重置?', onConfirm: resetMetadata, }" :tooltip="{ title: '重置后将使用产品的物模型配置' }"
key="reload">
<PermissionButton v-if="type === 'device' && instanceStore.detail?.independentMetadata"
:hasPermission="`${permission}:update`" :popConfirm="{ title: '确认重置?', onConfirm: resetMetadata, }"
:tooltip="{ title: '重置后将使用产品的物模型配置' }" key="reload">
重置操作
</PermissionButton>
<PermissionButton :isPermission="`${permission}:update`" @click="visible = true">快速导入</PermissionButton>
<PermissionButton :isPermission="`${permission}:update`" @click="cat = true">物模型TSL</PermissionButton>
<PermissionButton
:uhasPermission="`${permission}:update`"
@click="visible = true">快速导入</PermissionButton>
<PermissionButton
:uhasPermission="`${permission}:update`"
@click="cat = true">物模型TSL</PermissionButton>
</a-space>
</template>
@ -40,11 +44,13 @@
<BaseMetadata target={props.type} type="tags" :permission="permission" />
</a-tab-pane>
</a-tabs>
<Import :visible="visible" :type="type" @close="visible = false" />
<Cat :visible="cat" @close="cat = false" :type="type" />
{{ visible }}
<Import v-model:visible="visible" :type="type" @close="visible = false" />
<Cat v-model:visible="cat" @close="cat = false" :type="type" />
</div>
</template>
<script setup lang="ts" name="Metadata">
import { InfoCircleOutlined } from '@ant-design/icons-vue';
import PermissionButton from '@/components/PermissionButton/index.vue'
import { deleteMetadata } from '@/api/device/instance.js'
import { message } from 'ant-design-vue'
@ -80,21 +86,20 @@ const resetMetadata = async () => {
}
}
</script>
<style scoped lang="scss">
<style scoped lang="less">
.device-detail-metadata {
.tips {
width: calc(100% - 670px);
position: absolute;
top: 12px;
z-index: 1;
margin-left: 330px;
margin-left: 380px;
font-weight: 100;
}
.metadataNav {
:global {
.ant-card-body {
padding: 0;
}
:deep(.ant-card-body) {
padding: 0;
}
}
}