import Vue from 'vue'
import { AvicCommonSelect } from 'avic-ui';
import GC from "@grapecity/spread-sheets"
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
export class AutoUserSelectCellType extends GC.Spread.Sheets.CellTypes.Base{
constructor(cellModel,selectModel) {
super();
this.selectModel = selectModel;
this.displaySet = cellModel?.baseInfo?.displaySet ? cellModel.baseInfo.displaySet: 'all';
this.typeName = "AutoUserSelectCellType"
}
createEditorElement(context, cellWrapperElement){
cellWrapperElement.style.overflow = 'visible'
let editorContext = document.createElement("div")
editorContext.setAttribute("class", "spread-cell-wrapper");
let editor = document.createElement("div");
// 自定义单元格中editorContext作为容器，需要在创建一个child用于挂载，不能直接挂载到editorContext上
editorContext.appendChild(editor);
return editorContext;
}
activateEditor(editorContext, cellStyle, cellRect, context){
const defaultValue = context.sheet.getCell(context.row, context.col).value()
const displaySet = this.displaySet;
const selectModel = this.selectModel;
if (editorContext) {
editorContext.style.height = cellRect.height+"px";
editorContext.style.width = cellRect.width+"px";
// 动态创建VUE 组件并挂载到editor :default-value="defaultValue"
const AutoCompleteComponent = {
components:{
AvicCommonSelect
},
props: ['commonSelectProps'],
template: `<a-config-provider :locale="locale">
<AvicCommonSelect
ref="userSelectModel"
type="userSelect"
:selectModel="model"
:displaySet="displaySet"
:default-value="defaultValue"
:modal="{gcUIElement:'gcEditingInput'}"
></AvicCommonSelect>
</a-config-provider>`,
data(){
return {
locale: zhCN,
resultValue:"",
defaultValue:defaultValue,
model: selectModel,
displaySet:displaySet
}
}
};
const AutoCompleteCtor = Vue.extend(AutoCompleteComponent);
this.vm = new AutoCompleteCtor({
}).$mount(editorContext.firstChild);
this.vm.$refs["userSelectModel"].openSelect();
}
return editorContext;
}
updateEditor(editorContext, cellStyle, cellRect){
return {width: cellRect.width, height: cellRect.height};
}
// 格式化回显内容
format(value, format, formattedData, context) {
if(typeof value == 'object' && value?.ids){
return value.names+';'+value.deptName;
}else if(typeof value == 'string'){
return value;
}else{
return '';
}
}
getEditorValue(editorContext){
if (this.vm) {
return this.vm.$refs["userSelectModel"].select?.names;
// return {
// ...this.vm.$refs["userSelectModel"].select
// };
}
}
setEditorValue(editorContext, value){
if (editorContext) {
this.vm.$refs["userSelectModel"].defaultBack({ids: '', names: value});
}
}
deactivateEditor(editorContext, context){
// 销毁组件
this.vm.$destroy();
this.vm = undefined;
}
} |
