本帖最后由 Ellia.Duan 于 2022-11-24 10:06 编辑
import Vue from 'vue'
import moment from 'moment';
import GC from "@grapecity/spread-sheets"
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
export class dateCell extends GC.Spread.Sheets.CellTypes.Base{
constructor(cellData) {
super();
this.dateType = cellData?.baseInfo?.dateFormatType ? cellData.baseInfo.dateFormatType: 'YYYY';
this.typeName = "dateCell"
}
createEditorElement(context, cellWrapperElement){
cellWrapperElement.style.overflow = 'visible'
let editorContext = document.createElement("div")
editorContext.setAttribute("class", "spread-cell-wrapper");
let editor = document.createElement("div");
editorContext.appendChild(editor);
context.sheet.setFormatter(context.row, context.col,"",GC.Spread.Sheets.SheetArea.viewport);
return editorContext;
}
activateEditor(editorContext, cellStyle, cellRect, context){
const dateType = this.dateType;
let showTime = this.dateType == "YYYY-MM-DD HH:mm:ss"?{defaultValue:moment("00:00:00", "HH:mm:ss")}:false;
if (editorContext) {
editorContext.style.height = cellRect.height+"px";
editorContext.style.width = cellRect.width+"px";
const AutoCompleteComponent = {
template: `<a-config-provider :locale="locale">
<a-date-picker
v-model="text"
:show-time="showTime"
:open="isShow"
:show-today="true"
:format="dateFormat"
valueFormat="YYYY-MM-DD HH:mm:ss"
:getCalendarContainer="p=>p.parentNode"
@openChange="handleOk"
/>
</a-config-provider>`,
data(){
return {
text: "",
locale: zhCN,
isShow:true,
showTime:showTime,
dateFormat: dateType,
defaultValue: moment("00:00:00", "HH:mm:ss")
}
},
mounted() {
},
methods: {
moment,
handleOk(status){
this.isShow = status;
}
}
};
const AutoCompleteCtor = Vue.extend(AutoCompleteComponent);
this.vm = new AutoCompleteCtor({
}).$mount(editorContext.firstChild);
}
return editorContext;
}
updateEditor(editorContext, cellStyle, cellRect){
return {width: cellRect.width, height: cellRect.height};
}
getEditorValue(editorContext){
if (this.vm && this.vm.text != "") {
if(moment.isMoment(this.vm.text)) {
return this.vm.text.format("YYYY-MM-DD HH:mm:ss")
}
return this.vm.text;
}
return '';
}
setEditorValue(editorContext, value){
if (editorContext && value) {
this.vm.text = this.vm.moment(value, "YYYY-MM-DD HH:mm:ss");
}
}
format(value, format, formattedData, context) {
if(!value) {
return null
}
console.log(moment(value, this.dateType).format(this.dateType))
return moment(value, this.dateType).format(this.dateType)
}
deactivateEditor(editorContext, context){
this.vm.$destroy();
this.vm = undefined;
}
}
|
