Commit 1877f9a6 authored by zhengke's avatar zhengke

云盘

parent 688fd7b6
...@@ -570,6 +570,9 @@ page { ...@@ -570,6 +570,9 @@ page {
.colorBA{ .colorBA{
color: #BABABA; color: #BABABA;
} }
.color959AA3{
color: #959AA3;
}
.text-right{ .text-right{
text-align: right; text-align: right;
} }
......
...@@ -94,7 +94,8 @@ ...@@ -94,7 +94,8 @@
</div> </div>
</div> </div>
<div class="CloudDisk-R grow"> <div class="CloudDisk-R grow">
<div class="CloudDisk-R-header row flex-between q-mb-xs"> <div class="CloudDisk-R-header row flex-between items-center "
:class="[queryObj.layout==3?'q-mb-lg':'q-mb-xs']">
<div class="fz14 PingFangSC colorBA"> <div class="fz14 PingFangSC colorBA">
<span class="q-pr-lg figureTBOX cusor-pointer" v-for="(item,index) in figureType" <span class="q-pr-lg figureTBOX cusor-pointer" v-for="(item,index) in figureType"
:class="[queryObj.imgType==item.ID?'active':'']" :class="[queryObj.imgType==item.ID?'active':'']"
...@@ -192,7 +193,7 @@ ...@@ -192,7 +193,7 @@
</el-icon> </el-icon>
<span>{{item.Name}}</span> <span>{{item.Name}}</span>
</div> </div>
<IconCheck class="q-pl-lg" v-if="queryObj.layout==item.ID"></IconCheck> <IconCheck class="q-pl-lg" v-if="item.check"></IconCheck>
</el-dropdown-item> </el-dropdown-item>
</template> </template>
</el-dropdown-menu> </el-dropdown-menu>
...@@ -200,14 +201,16 @@ ...@@ -200,14 +201,16 @@
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<div ref="imgDiskRef" class="full-height" style="padding-top: 10px; overflow: auto;" <div ref="imgDiskRef" class="full-height" style="padding-top: 10px;overflow:auto"
:style="{'padding-bottom':queryObj.pageCount == queryObj.pageIndex && !loading?'20px':'85px'}"> :style="{'padding-bottom':queryObj.pageCount == queryObj.pageIndex && !loading?'60px':'130px'}">
<cellList v-show="queryObj.layout==1" :dataList="dataList" <cellList v-show="queryObj.layout==1" :dataList="dataList"
@refreshHandler="refreshHandler" @refreshHandler="refreshHandler"
@CopyTo="CopyTo" @CopyTo="CopyTo"
@MoveFile="MoveFile" @MoveFile="MoveFile"
@getImg="getImg" @getImg="getImg"
@deleteImg="deleteImg" @deleteImg="deleteImg"
@MultipleChoice="MultipleChoice"
:Parent="datas"
></cellList> ></cellList>
<waterfallFlowList v-show="queryObj.layout==2" :dataList="dataList" <waterfallFlowList v-show="queryObj.layout==2" :dataList="dataList"
@refreshHandler="refreshHandler" @refreshHandler="refreshHandler"
...@@ -215,6 +218,8 @@ ...@@ -215,6 +218,8 @@
@MoveFile="MoveFile" @MoveFile="MoveFile"
@getImg="getImg" @getImg="getImg"
@deleteImg="deleteImg" @deleteImg="deleteImg"
@MultipleChoice="MultipleChoice"
:Parent="datas"
></waterfallFlowList> ></waterfallFlowList>
<list v-show="queryObj.layout==3" :dataList="dataList" <list v-show="queryObj.layout==3" :dataList="dataList"
@refreshHandler="refreshHandler" @refreshHandler="refreshHandler"
...@@ -222,6 +227,8 @@ ...@@ -222,6 +227,8 @@
@MoveFile="MoveFile" @MoveFile="MoveFile"
@getImg="getImg" @getImg="getImg"
@deleteImg="deleteImg" @deleteImg="deleteImg"
@MultipleChoice="MultipleChoice"
:Parent="datas"
></list> ></list>
<div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg"> <div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg">
<!-- <img :src="noDataImg(2)" width="118" /> --> <!-- <img :src="noDataImg(2)" width="118" /> -->
...@@ -241,17 +248,43 @@ ...@@ -241,17 +248,43 @@
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
/> />
</div> --> </div> -->
<div class="CloudDisk-RBF animate__animated animate__fadeInUp" v-show="datas.ControlsShow">
<div class="CloudDisk-RBFCenter microsoft">
<div class="row flex-center">
<div class="CloudDisk-RBFbj rounded row items-center">
<div class="row items-center">
<el-checkbox class="fz14" label="全选" v-model="datas.selectAll"
:indeterminate="datas.indeterminate" style="position: relative;top: 1px;"
@change="setSelecAll"/>
<span class="fz14 q-pl-md color959AA3"><span>已选择</span> <span class="q-pl-xs">{{datas.SelectedDatas.length}}</span></span>
</div>
<div class="q-px-lg">
<div style="border-right: 1px solid #BABABA;height: 13px;">&nbsp;</div>
</div>
<el-button icon="CopyDocument" size="small" @click="CopyTo()">复制到</el-button>
<el-button icon="Expand" size="small" @click="CopyTo()">移动到</el-button>
<el-button icon="Delete" size="small" @click="CopyTo()">删除</el-button>
<el-button icon="View" size="small" @click="CopyTo()">查看</el-button>
<span class="close-btn cursor-pointer column items-center flex-center q-pl-md" @click="datas.ControlsShow=false">
<IconClose :size="14"></IconClose>
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
<!-- 编辑分组 -->
<NewEditCloudDisk <NewEditCloudDisk
v-if="dialogFormVisible" v-if="dialogFormVisible"
:dialogType="dialogType" :dialogType="dialogType"
:addEditMsg="addEditMsg" :addEditMsg="addEditMsg"
@close="close" @close="close"
@success="close(),dialogFormVisible=false,querySearchGroup()"></NewEditCloudDisk> @success="close(),dialogFormVisible=false,querySearchGroup()"></NewEditCloudDisk>
<!-- 复制移动 -->
<copyMove <copyMove
v-if="dialogCMVisible" v-if="dialogCMVisible"
:dialogType="dialogType" :dialogType="dialogType"
...@@ -260,7 +293,7 @@ ...@@ -260,7 +293,7 @@
:GroupList="GroupAll" :GroupList="GroupAll"
@close="close" @close="close"
@success="close(),dialogCMVisible=false,SearchGroup(),refreshHandler()"></copyMove> @success="close(),dialogCMVisible=false,SearchGroup(),refreshHandler()"></copyMove>
<!-- 预览图 -->
<el-image-viewer <el-image-viewer
@close="() => { isViewerShow = false }" @close="() => { isViewerShow = false }"
v-if="isViewerShow" v-if="isViewerShow"
...@@ -305,7 +338,7 @@ ...@@ -305,7 +338,7 @@
type: '1',//稿定模版 type: '1',//稿定模版
imgType: 1,//模版 素材 imgType: 1,//模版 素材
Sorts: [],//排序 Sorts: [],//排序
layout: 3,//布局 layout: 1,//布局
date: '',//日期 date: '',//日期
}) })
...@@ -357,11 +390,47 @@ ...@@ -357,11 +390,47 @@
{Name: '降序',ID:6,check:false}, {Name: '降序',ID:6,check:false},
]) ])
const layoutType = ref([ const layoutType = ref([
{Name: '宫格',ID:1}, {Name: '宫格',ID:1,check:false},
{Name: '瀑布流',ID:2}, {Name: '瀑布流',ID:2,check:false},
{Name: '列表',ID:3}, {Name: '列表',ID:3,check:false},
]) ])
const datas = reactive({
selectAll: false,
SelectedDatas: [] as any,
ControlsShow: true,// 批量操作显示
indeterminate: false,// 未全选状态
})
layoutType.value.forEach(x=>{
if(x.ID==queryObj.layout) x.check = true
})
const MultipleChoice = (row:Array) =>{
datas.SelectedDatas = row
console.log(datas.SelectedDatas,'---000')
if(datas.SelectedDatas.length==0) {
datas.selectAll = false
datas.indeterminate = false
}else if(datas.SelectedDatas.length>0){
if(dataList.value.length==datas.SelectedDatas.length){
datas.selectAll = true
datas.indeterminate = false
}else if(dataList.value.length>datas.SelectedDatas.length){
datas.indeterminate = true
}
}
}
const setSelecAll = () => {
if(datas.selectAll){
datas.SelectedDatas = dataList.value.map(x=>{x.DetailsId})
}else{
datas.SelectedDatas = []
}
datas.indeterminate = false
}
const OpenDropdown = () =>{ const OpenDropdown = () =>{
if(currentSearchType.value==3)dropdownSort.value.handleOpen() if(currentSearchType.value==3)dropdownSort.value.handleOpen()
if(currentSearchType.value==4)dropdownLayout.value.handleOpen() if(currentSearchType.value==4)dropdownLayout.value.handleOpen()
...@@ -373,6 +442,10 @@ ...@@ -373,6 +442,10 @@
queryObj.Sorts = newSortType.map(x=>{return x.ID}) queryObj.Sorts = newSortType.map(x=>{return x.ID})
} }
if(type==2){ if(type==2){
layoutType.value.forEach(x=>{
if(x.ID!=item.ID) x.check = false
})
item.check = true
queryObj.layout = item.ID queryObj.layout = item.ID
} }
if(type==3){ if(type==3){
...@@ -619,7 +692,7 @@ const SearchImg = () =>{ ...@@ -619,7 +692,7 @@ const SearchImg = () =>{
if (pageRes.data.resultCode==ApiResult.SUCCESS) { if (pageRes.data.resultCode==ApiResult.SUCCESS) {
let arrList = function (list) { let arrList = function (list) {
list.forEach((x) => { list.forEach((x) => {
x.show = false; x.check = false;
}); });
}; };
arrList(pageRes.data.data.pageData); arrList(pageRes.data.data.pageData);
...@@ -685,13 +758,16 @@ onMounted(()=>{ ...@@ -685,13 +758,16 @@ onMounted(()=>{
.CloudDisk-R-header { .CloudDisk-R-header {
padding: 0 0 0 20px; padding: 0 0 0 20px;
} }
.CloudDisk-R::v-deep(.el-button){ .CloudDisk-R-header::v-deep(.el-button){
height: auto; height: auto;
padding: 10px; padding: 10px;
background-color: rgba(23,23,23,0); background-color: rgba(23,23,23,0);
border: rgba(23,23,23,0); border: rgba(23,23,23,0);
} }
.CloudDisk-R .DiskRHActive::v-deep(.el-button){ .CloudDisk-R {
overflow: hidden;
}
.CloudDisk-R-header .DiskRHActive::v-deep(.el-button){
height: auto; height: auto;
padding: 10px; padding: 10px;
background-color: #E8E8E8; background-color: #E8E8E8;
...@@ -713,7 +789,7 @@ onMounted(()=>{ ...@@ -713,7 +789,7 @@ onMounted(()=>{
width: 112px; width: 112px;
/* height: 36px; */ /* height: 36px; */
} }
.CloudDisk-L-inquire .el-button{ .CloudDisk-L-inquire::v-deep(.el-button){
/* height: 36px; */ /* height: 36px; */
margin-left: 20px; margin-left: 20px;
} }
...@@ -793,15 +869,28 @@ onMounted(()=>{ ...@@ -793,15 +869,28 @@ onMounted(()=>{
font-size: 14px; font-size: 14px;
// color: #CECECE; // color: #CECECE;
} }
.CloudDisk-L-Center{ .CloudDisk-L-Center{
height: 95%; height: 95%;
overflow-y: scroll; overflow-y: scroll;
} }
.CloudDisk-RBF{
position: fixed;
bottom: 10px;
left: 515px;
right: 0;
z-index: 2;
}
.CloudDisk-RBFCenter{
margin: auto;
}
.CloudDisk-RBFbj{
background: #fff;
box-shadow: 0px 0px 13px 0px #eee;
border-color:#eee;
padding: 5px 15px;
}
.CloudDisk-RBFbj .close-btn:hover{
color: $themeColor;
}
</style> </style>
\ No newline at end of file
<template> <template>
<div class="CloudDisk-R-Center row"> <div class="CloudDisk-R-Center row">
<template v-for="(item,index) in dataList"> <template v-for="(item,index) in dataList">
<div style="position: relative;">
<el-checkbox style="position: absolute;left: 30px;top: -3px;"
class="fz14" label="" v-model="item.check"
@change="handleSelectionChange(item)"/>
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<div class="CloudDisk-R-Box cursor-pointer" :key="index"> <div class="CloudDisk-R-Box cursor-pointer" :key="index">
<div class="CloudDisk-R-Img"> <div class="CloudDisk-R-Img">
...@@ -48,6 +52,8 @@ ...@@ -48,6 +52,8 @@
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div>
</template> </template>
</div> </div>
</template> </template>
...@@ -60,6 +66,10 @@ ...@@ -60,6 +66,10 @@
type: Array, type: Array,
default: [], default: [],
}, },
Parent:{
type: Object,
default: {},
}
}) })
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void, (event: 'close'): void,
...@@ -68,10 +78,24 @@ ...@@ -68,10 +78,24 @@
(event: 'MoveFile'): void, (event: 'MoveFile'): void,
(event: 'getImg'): void, (event: 'getImg'): void,
(event: 'deleteImg'): void, (event: 'deleteImg'): void,
(event: 'MultipleChoice'): void,
}>() }>()
const editorTarget = ref('') const editorTarget = ref('')
const nickNam = ref(''|| Number) const nickNam = ref(''|| Number)
const editLoading = ref(false) const editLoading = ref(false)
const multipleSelection = ref([] as any)
const handleSelectionChange = (row: any) =>{
let filter = props.Parent.SelectedDatas.filter(x=>x==row.DetailsId)
if(filter.length==0&&row.check) {
multipleSelection.value.push(row.DetailsId)
emit('MultipleChoice',multipleSelection.value)
}else {
let newFilter = props.Parent.SelectedDatas.filter(x=>x!=row.DetailsId)
multipleSelection.value = newFilter
emit('MultipleChoice',multipleSelection.value)
}
}
const setCloudNameHandler = async (target:any)=>{ const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true editLoading.value = true
......
<template> <template>
<div class="CloudDisk-R-Center row"> <div class="CloudDisk-R-Center row" v-if="dataList.length>0">
<el-table :data="dataList" style="width: 100%"> <el-table :data="dataList" style="width: 100%;"
<el-table-column type="selection" width="55" /> ref="multipleTableRef">
<el-table-column label="Date" show-overflow-tooltip> <el-table-column type="selection" width="55"
@selection-change="handleSelectionChange"/>
<el-table-column label="基本信息" show-overflow-tooltip min-width="200">
<template #default="scope"> <template #default="scope">
<div class="row items-center"> <div class="row items-center">
<el-image class="rounded" :src="scope.row.FilePath" style="width: 85px; height: auto;" <el-image
fit="cover"/> class="cursor-pointer"
<span class="microsoft q-pl-md">{{scope.row.FileName}}</span> style="width: 50px; height: auto"
<!-- <div class="cloudDownName microsoft"> :src="scope.row.FilePath"
<div class="col row items-center" style="color:#000;" v-if="editorTarget!=scope.row.DetailsId"> :zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="[]"
:initial-index="4"
fit="contain"
@click="getImg(scope.row,scope.$index)"
>
<template #error>
<el-image :src="errImg"></el-image>
</template>
</el-image>
<div class="cloudDownName microsoft q-pl-md">
<div class="cloudDownNameH col row items-center cursor-pointer" style="color:#000;" v-if="editorTarget!=scope.row.DetailsId">
<span class="grow">{{scope.row.FileName}}</span> <span class="grow">{{scope.row.FileName}}</span>
<IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(scope.row)"></IconPencli> <IconPencli size="14" class="q-ml-md cusor-pointer editor-pencli" @click="setNameHandler(scope.row)"></IconPencli>
</div> </div>
...@@ -19,22 +34,44 @@ ...@@ -19,22 +34,44 @@
:loading="editLoading">确认</el-button> :loading="editLoading">确认</el-button>
<el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button> <el-button link size="small" style="margin-left: 5px;" @click="setNameHandler">取消</el-button>
</div> </div>
</div> --> </div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="ExtName" label="格式" width="100" /> <el-table-column property="ExtName" label="格式" width="" />
<el-table-column label="尺寸" width="240"> <el-table-column label="尺寸" min-width="150">
<template #default="scope">{{ scope.row.WithHeight }} px</template> <template #default="scope">
<template v-if="scope.row.WithHeight">{{ scope.row.WithHeight }} px</template>
</template>
</el-table-column> </el-table-column>
<el-table-column label="大小" width="240"> <el-table-column label="大小" min-width="100">
<template #default="scope">{{ scope.row.FileSize }} kb</template> <template #default="scope">{{ scope.row.FileSize }} kb</template>
</el-table-column> </el-table-column>
<el-table-column align="center" min-width="80">
<template #header>
<el-icon>
<IconSetting></IconSetting>
</el-icon>
</template>
<template #default="scope">
<el-dropdown trigger="click" >
<el-icon class="cursor-pointer" size="16" color="#b1b7cf"><MoreFilled /></el-icon>
<template #dropdown>
<el-dropdown-menu class="q-pa-md microsoft">
<el-dropdown-item icon="CopyDocument" @click="CopyTo(scope.row)">复制到</el-dropdown-item>
<el-dropdown-item icon="Expand" @click="MoveFile(scope.row)">移动到</el-dropdown-item>
<el-dropdown-item icon="Delete" @click="deleteImg(scope.row)">删除</el-dropdown-item>
<el-dropdown-item icon="View" @click="getImg(scope.row,scope.$index)">查看</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref, reactive } from "vue";
import CloudDiskService from "@/services/CloudDiskService"; import CloudDiskService from "@/services/CloudDiskService";
import { ApiResult } from "@/configs/axios"; import { ApiResult } from "@/configs/axios";
const props = defineProps({ const props = defineProps({
...@@ -42,6 +79,10 @@ ...@@ -42,6 +79,10 @@
type: Array, type: Array,
default: [], default: [],
}, },
Parent:{
type: Object,
default: {},
}
}) })
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void, (event: 'close'): void,
...@@ -50,10 +91,17 @@ ...@@ -50,10 +91,17 @@
(event: 'MoveFile'): void, (event: 'MoveFile'): void,
(event: 'getImg'): void, (event: 'getImg'): void,
(event: 'deleteImg'): void, (event: 'deleteImg'): void,
(event: 'MultipleChoice'): void,
}>() }>()
const editorTarget = ref('') const editorTarget = ref('')
const nickNam = ref(''|| Number) const nickNam = ref(''|| Number)
const editLoading = ref(false) const editLoading = ref(false)
const errImg = ref(require('@/assets/img/noImg.png') as any)
const multipleSelection = ref([] as any)
const handleSelectionChange = (val: []) =>{
multipleSelection.value = val.map(x=>{return x.DetailsId})
}
const setCloudNameHandler = async (target:any)=>{ const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true editLoading.value = true
...@@ -63,6 +111,8 @@ ...@@ -63,6 +111,8 @@
} }
let dataRes = await CloudDiskService.UpdateCloudInfoName(params) let dataRes = await CloudDiskService.UpdateCloudInfoName(params)
if (dataRes.data.resultCode==ApiResult.SUCCESS) { if (dataRes.data.resultCode==ApiResult.SUCCESS) {
editorTarget.value = ''
nickNam.value = ''
emit('refreshHandler') emit('refreshHandler')
} }
editLoading.value = false editLoading.value = false
...@@ -92,77 +142,25 @@ ...@@ -92,77 +142,25 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.CloudDisk-R-Center{ .editor-pencli{
padding-left: 24px;
}
.CloudDisk-R-Box{
width: 87px;
margin-left: 24px;
margin-bottom: 24px;
position: relative;
}
.CloudDisk-R-Box.active .CloudDisk-R-Img{
width: 85px;
height: 85px;
background: #8790F3;
box-shadow: 0px 0px 13px 0px #0D3EBC;
border-radius: 8px;
border-color:#3556F9;
}
.CloudDisk-R-Box .close-btn{
position: absolute;
top: -10px;
right: 0px;
width: 20px;
height: 20px;
line-height: 12px;
background: #fff;
border:1px solid #AFAFAF;
text-align: center;
color:#AFAFAF;
border-radius: 50%;
z-index: 3;
display: none; display: none;
} }
.CloudDisk-R-Box.active2:hover .close-btn{ .cloudDownNameH:hover .editor-pencli{
display: block; display: block;
} }
.CloudDisk-R-Img{ .CloudDisk-R-Center::v-deep(.el-table__body){
width: 85px; margin-top: 8px;
height: 85px;
margin-bottom: 9px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 0px 13px 0px #eee;
border-radius: 8px;
border-color:#eee;
}
.CloudDisk-R-Img .el-image{
width: 85px;
}
.title{
width: 85px;
line-height: 17px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
color: #000000;
} }
.cloudDownName{ .CloudDisk-R-Center::v-deep(.el-table__header-wrapper th){
min-width: 200px; background-color: #f5f7fa;
padding: 10px 20px 15px 20px;
font-size: 14px;
color: #000;
} }
.cloudDownText{ .CloudDisk-R-Center::v-deep(.el-table__header-wrapper){
padding: 0 20px 10px 20px; position:fixed;
font-size: 14px; top: 180px;
z-index: 2
} }
.cloudDownTextLin{ .CloudDisk-R-Center{
border-bottom: 1px solid #F0F0F0; padding-left: 24px;
padding-bottom: 20px;
} }
</style> </style>
\ No newline at end of file
...@@ -84,6 +84,7 @@ ...@@ -84,6 +84,7 @@
(event: 'MoveFile'): void, (event: 'MoveFile'): void,
(event: 'getImg'): void, (event: 'getImg'): void,
(event: 'deleteImg'): void, (event: 'deleteImg'): void,
(event: 'MultipleChoice'): void,
}>() }>()
const editorTarget = ref('') const editorTarget = ref('')
const nickNam = ref(''|| Number) const nickNam = ref(''|| Number)
...@@ -92,6 +93,12 @@ ...@@ -92,6 +93,12 @@
logo, logo,
error error
}) })
const multipleSelection = ref([] as any)
const handleSelectionChange = (row: any) =>{
multipleSelection.value.push(row.DetailsId)
emit('MultipleChoice',multipleSelection.value)
}
const setCloudNameHandler = async (target:any)=>{ const setCloudNameHandler = async (target:any)=>{
if(editLoading.value || nickNam.value=='' || !nickNam.value) return if(editLoading.value || nickNam.value=='' || !nickNam.value) return
editLoading.value = true editLoading.value = true
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment