super-page-runtime 1.0.12 → 1.0.14

package/src/components/runtime/views/assemblys/container/tools/tools-runtime.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="amb-widget-tools-parent">
+      <div
+          class="amb-widget-container-tool amb-widget-tools"
+          :style="runtimeStyle"
+          :class="runtimeClass"
+          ref="thisRef">
+          <template v-for="(element,itemIndex) in configure.items" :key="element.uuid">
+            <ObjectRender
+                  :pageContext="pageContext"
+                  :configure="element"></ObjectRender>
+          </template>
+      </div>
+  </div>
+</template>
+<script lang='ts' setup>
+    import {ref,onMounted,onUnmounted} from 'vue';
+    import ObjectRender from '../../object-render.vue'
+    import type { Component,PageContext} from '@/components/design/utils/interfaces/page-design-types';
+    import {addComponentRef} from '../../../../utils/global-refs';
+    interface MyProps{
+      pageContext:PageContext,
+      configure:Component
+    }
+    const props = defineProps<MyProps>();
+    
+    //自身引用
+    const thisRef:any = ref(null);
+    const runtimeInfo = props.configure.runtime?props.configure.runtime:{};
+    //运行时的自身详细参数
+    const runtimeStyle = ref(runtimeInfo.style?runtimeInfo.style:{});
+    const runtimeClass = runtimeInfo.class;
+    
+    //加载后的事件
+    let resizeObserver:any=null;
+    onMounted(()=>{
+      //监控父容器的变化
+      if(thisRef.value&&thisRef.value.parentNode){
+        const resizeObserver = new ResizeObserver(entries => {
+          for (let entry of entries) {
+            //console.log('Element:', entry.target,entry.contentRect);
+            //console.log(`Element size: ${entry.contentRect.width}px x ${entry.contentRect.height}px`);
+            //console.log(`Element padding: ${entry.contentRect.top}px ; ${entry.contentRect.left}px`);
+          }
+          caculatePositionStyle();
+        });
+        // 添加监听器到需要观察的 DOM 元素
+        resizeObserver.observe(thisRef.value.parentNode);
+      }
+    });
+    onUnmounted(() => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    });
+    /**
+     * 计算工具栏特有的样式
+     */
+    function caculatePositionStyle(){
+      if(thisRef.value&&thisRef.value.parentNode){
+        //位置计算
+        const thisProps = props.configure.props;
+        const position = thisProps.position;
+        if(position=='top1'||position=='bottom1'){
+          const tempStyle:any = {};
+          //position: -webkit-sticky
+          tempStyle['position'] = 'fixed !important';
+          tempStyle['z-index'] = '1';
+          //找展示容器的位置
+          //const contentObj = document.getElementsByClassName("amb-design-board");
+          const contentObj = [thisRef.value.parentNode];
+          if(contentObj&&contentObj.length>0){
+            const contentRec = contentObj[0].getBoundingClientRect();
+            if(position=='top'){
+              tempStyle['top'] = contentRec.top+"px";
+            }
+            if(position=='bottom'){
+              tempStyle['bottom'] = "10px";
+            }
+          }
+          //与父类一样宽
+          const parentRec = thisRef.value.parentNode.getBoundingClientRect();
+          console.log("parentRec",parentRec)
+          tempStyle['width'] = parentRec.width-25+"px";
+          
+          //
+          //设置到对象中
+          Object.assign(runtimeStyle.value,tempStyle);
+          /**const contentObj = document.getElementsByClassName("amb-design-content");
+          if(contentObj&&contentObj.length>0){
+            console.log("contentObj.scrollY",contentObj[0].getBoundingClientRect());
+            const absoluteTop = rect.top + contentObj.scrollY;
+          }*/
+        }
+      }
+    }
+</script>

package/src/components/runtime/views/assemblys/data/bar-code/barcode-attr-base.vue

@@ -0,0 +1,110 @@
+<template>
+	<el-form label-width="80px" size="small">
+		<el-collapse v-model="openCollapseItems" style="margin-top:6px;">
+			<el-collapse-item
+					title="基本"
+					name="base"
+					class="amb-design-attr-group-header">
+				<div style="padding:8px 0px 0px 0px;">
+					<el-form-item label="组件类型" class="amb-design-attr-item">
+						<el-select v-model="configure.name" placeholder="请选择" >
+							<el-option
+									v-for="item in getFormComponentOptions()"
+									:key="item.name"
+									:label="item.label"
+									:value="item.name"
+							/>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="组件名" class="amb-design-attr-item">
+						<el-input v-model="configure.props.base.name" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="条码类型" class="amb-design-attr-item">
+						<el-radio-group v-model="configure.props.base.type" class="ml-4">
+							<el-radio value="br-code">条形码</el-radio>
+							<el-radio value="QR-code">二维码</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<el-form-item label="条形码格式" class="amb-design-attr-item">
+						<el-select
+								v-model="configure.props.base.format"
+								placeholder="请选择"
+						>
+							<el-option label="默认" value="CODE128"/>
+							<el-option label="CODE128A" value="CODE128A"/>
+							<el-option label="CODE128B" value="CODE128B"/>
+							<el-option label="CODE128C" value="CODE128C"/>
+							<el-option label="CODE39" value="CODE39"/>
+							<el-option label="EAN-13" value="EAN-13"/>
+							<el-option label="EAN-8" value="EAN-8"/>
+							<el-option label="EAN-5" value="EAN-5"/>
+							<el-option label="EAN-2" value="EAN-2"/>
+							<el-option label="UPC（A）" value="UPC（A）"/>
+							<el-option label="ITF" value="ITF"/>
+							<el-option label="ITF-14" value="ITF-14"/>
+							<el-option label="MSI" value="MSI"/>
+							<el-option label="MSI10" value="MSI10"/>
+							<el-option label="MSI11" value="MSI11"/>
+							<el-option label="MSI1010" value="MSI1010"/>
+							<el-option label="MSI1110" value="MSI1110"/>
+							<el-option label="Pharmacode" value="Pharmacode"/>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="状态" class="amb-design-attr-item">
+						<el-radio-group v-model="configure.props.base.state" class="ml-4">
+							<el-radio value="default">普通</el-radio>
+							<el-radio value="hidden">隐藏</el-radio>
+						</el-radio-group>
+					</el-form-item>
+				</div>
+			</el-collapse-item>
+			<el-collapse-item
+					title="数据"
+					name="data"
+					class="amb-design-attr-group-header">
+				<div style="padding:8px 0px 0px 0px;">
+					<el-form-item label="绑定" class="amb-design-attr-item">
+						<el-radio-group v-model="configure.props.base.way" class="ml-4">
+							<el-radio value="data">绑定变量</el-radio>
+							<el-radio value="regulation">绑定规则</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<el-form-item v-if="configure.props.base.way === 'data'" label="绑定变量" class="amb-design-attr-item">
+						<DataoriginInputtable v-model:modelValue="configure.props.base.bindProp"></DataoriginInputtable>
+					</el-form-item>
+					<el-form-item v-if="configure.props.base.way === 'regulation'" label="绑定规则" class="amb-design-attr-item">
+						<DataoriginInputtable v-model:modelValue="configure.props.base.regulation"></DataoriginInputtable>
+					</el-form-item>
+					<div v-if="dataRule">
+						<el-form-item v-for="(item,index) in dataRule" :key="index" :label="item.name" class="amb-design-attr-item">
+							<DataoriginInputtable v-model:modelValue="item.date"></DataoriginInputtable>
+						</el-form-item>
+					</div>
+				</div>
+			</el-collapse-item>
+			<CommonAttrSize :size="configure.props.size" />
+		</el-collapse>
+	</el-form>
+</template>
+<script lang='ts' setup>
+import { ref } from 'vue';
+import { getFormComponentOptions } from '../../../../utils/assemblys-config.js'
+import Verification from '../../form/common/verification.vue'
+import CommonAttrSize from '../../common/common-attr-size.vue'
+import Title from '../../form/common/title.vue'
+import PreSuffix from '../../form/common/pre-suffix.vue'
+import DataoriginInputtable from '../../form/common/dataorigin-input-table.vue'
+import BarCodeRule from '../../form/common/bar-code-rule.vue'
+
+defineProps({
+	configure: Object,
+	default: () => ({props: {}})
+});
+const openCollapseItems = ref("")
+const dataRule = ref([])
+const BarCodeRuleOff = ref(false)
+function barCodeRuleSelect(selectArr:[]) {
+	dataRule.value = selectArr
+}
+
+</script>

package/src/components/runtime/views/assemblys/data/bar-code/barcode-attr-event.vue

@@ -0,0 +1,14 @@
+<template>
+	<el-form label-width="80px" size="small">
+		<AttrEvent :events="events"></AttrEvent>
+	</el-form>
+</template>
+<script lang='ts' setup>
+import { ref, computed, defineEmits } from 'vue';
+import AttrEvent from '../../form/common/attr-event.vue'
+import {getFormComponentOptions} from '../../../../utils/assemblys-config.js'
+defineProps({
+	configure:Object
+});
+const events = ['click', 'remove','show', 'hidden']
+</script>

package/src/components/runtime/views/assemblys/data/bar-code/barcode-attr-style.vue

@@ -0,0 +1,25 @@
+<template>
+	<el-form label-width="80px" size="small">
+		<el-collapse v-model="openCollapseItems" style="margin-top:6px;">
+			<AttrStyle :configure="configure" :blankOption="blankOption"></AttrStyle>
+		</el-collapse>
+	</el-form>
+</template>
+<script lang='ts' setup>
+import { defineProps } from 'vue';
+import AttrStyle from '../../form/common/attr-style.vue'
+defineProps({
+	configure:Object
+});
+const blankOption = {
+	showTittleFont:false, // 是否显示标题字体
+	showBackground:true, // 是否显示背景
+	showPosition:true, // 是否显示定位
+	showMargin:true, // 是否显示外边距
+	showPadding:true, // 是否显示内边距
+	showBorder:true, // 是否显示边框
+	showShadow:true, // 是否显示阴影
+	showCursor:true, // 是否显示鼠标手势
+	showCustom:true, // 是否显示自定义
+}
+</script>

package/src/components/runtime/views/assemblys/data/bar-code/barcode-attr.vue

@@ -0,0 +1,29 @@
+<template>
+	<div class="amb-design-attr-content">
+		<AttrHeader v-model="currentConfigType"/>
+		<div class="amb-design-attr-list">
+			<AttrBase v-show="currentConfigType === 'base'" :configure="configure"></AttrBase>
+			<AttrStyle v-show="currentConfigType === 'style'" :configure="configure"></AttrStyle>
+			<AttrEvent v-show="currentConfigType === 'event'" :configure="configure"></AttrEvent>
+		</div>
+	</div>
+</template>
+<script lang='ts' setup>
+import AttrBase from './barcode-attr-base.vue';
+import AttrStyle from './barcode-attr-style.vue';
+import AttrHeader from '../../form/common/attr-header.vue'
+import AttrEvent from './barcode-attr-event.vue';
+import { ref } from 'vue';
+
+defineProps({
+	configure: {
+		type: Object,
+		default: () => ({ title: 'Text',props: {type: 'input-text'} }) // 设置默认值
+	}
+});
+let currentConfigType = ref("base")
+
+</script>
+<style >
+@import '../../../../../../assets/design-attr.css';
+</style>

package/src/components/runtime/views/assemblys/data/bar-code/barcode-design.vue

@@ -0,0 +1,95 @@
+<template>
+	<div :class="designClass" :style="designStyle">
+		<img v-if="designProperty.type === 'QR-code'" :src="qrUrl">
+		<canvas v-else ref="barcode"></canvas>
+	</div>
+</template>
+<script lang='ts' setup>
+import {ref, watch,onMounted} from "vue";
+import qrcode from 'qrcode';
+import JsBarcode from 'jsbarcode'
+import {caculateDetailComponentStyle,caculateComponentProps} from "../../../../utils/form-design-util";
+
+const props = defineProps({
+	configure:Object
+});
+
+const qrCodeData = ref('Hello br code')
+const qrUrl = ref('')
+const barcode = ref(null)
+const barcodeFormat = ref('CODE128')
+// 生成条形码
+function createBarCode(){
+	JsBarcode(barcode.value, qrCodeData.value,{format: barcodeFormat.value,});
+}
+// 生成二维码
+function createQrCode(){
+	qrcode.toDataURL(qrCodeData.value, (err, url) => {
+		if (err) {
+			console.error(err);
+		} else {
+			qrUrl.value = url;
+		}
+	});
+}
+
+function getRestsParameter(){
+	let defineProps = {}
+	const tempProps = {}
+
+	if (props.configure.props.preSuffix){
+		defineProps = props.configure.props
+	}
+	// 绑定变量
+	if (defineProps['base']['bindProp']){
+		qrCodeData.value = defineProps['base']['bindProp']
+	}
+
+	// 条形码格式
+	// if (defineProps['base'] && defineProps['base']['format']){
+	// 	barcodeFormat.value = defineProps['base']['format']
+	// }
+
+	// 条码类型
+	if (defineProps['base'] && defineProps['base']['type'] === 'br-code'){
+		// 条形码
+		createBarCode()
+		tempProps['type'] = defineProps['base']['type']
+	}
+
+	if (defineProps['base'] && defineProps['base']['type'] === 'QR-code'){
+		// 二维码
+		createQrCode()
+		tempProps['type'] = defineProps['base']['type']
+	}
+
+	if (tempProps != {}){
+		for (const tempPropsKey in tempProps) {
+			designProperty.value[tempPropsKey] = tempProps[tempPropsKey]
+		}
+	}
+}
+
+onMounted(() =>{
+	createBarCode()
+})
+
+//定义自身详细参数
+const designStyle = ref({});
+const designClass = ref('');
+const designHeaderStyle = ref({});
+const designProperty = ref({})
+//监控配置样式的变化
+watch(props.configure.style,()=>{
+	caculateDetailComponentStyle(props.configure,designStyle,designClass,designHeaderStyle);
+},{immediate:true});
+
+//监控配置属性的变化
+watch(props.configure.props,()=>{
+	caculateComponentProps(props.configure,designProperty),
+	getRestsParameter()
+},{immediate:true});
+</script>
+<style scoped>
+
+</style>

package/src/components/runtime/views/assemblys/data/component/attr-header.vue

@@ -0,0 +1,69 @@
+<template>
+		<div class="amb-design-attr-header">
+				<div class="amb-design-attr-header-type">
+					<label :class="{ selected: clickType === 'base' }" @click="changeType('base')">属性</label>
+					<label :class="{ selected: clickType === 'advanced' }" @click="changeType('advanced')">高级</label>
+					<label :class="{ selected: clickType === 'import' }" @click="changeType('import')">导入配置</label>
+					<label :class="{ selected: clickType === 'style' }" @click="changeType('style')">样式</label>
+					<label :class="{ selected: clickType === 'event' }" @click="changeType('event')">事件</label>
+				</div>
+		</div>
+</template>
+<script lang='ts' setup>
+import { ref, defineProps } from 'vue';
+const props = defineProps({
+		modelValue: {
+			type: String,
+			default: 'base' // 设置默认值
+		}
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const clickType = ref(props.modelValue);
+
+function changeType(type: string) {
+  clickType.value = type;
+  emit('update:modelValue', type);
+};
+</script>
+<style scoped>
+.amb-design-attr-header {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0px;
+  z-index: 1;
+  text-align: center;
+  padding: 20px 0px 10px 0px;
+}
+.amb-design-attr-header-type {
+  border-radius: 100px 100px 100px 100px;
+  background: #ffffff;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
+  padding: 10px;
+  padding-bottom: 12px;
+	width: 230px;
+	white-space: nowrap;
+	overflow:auto;
+}
+.amb-design-attr-header-type::-webkit-scrollbar {
+  max-width: 6px;
+  height: 6px;
+}
+
+.amb-design-attr-header-type::-webkit-scrollbar-thumb {
+  background: #eaeaea;
+  border: none;
+  border-radius: 4px;
+}
+.amb-design-attr-header-type > label {
+  padding: 4px 14px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.amb-design-attr-header-type > label.selected {
+  border-radius: 100px 100px 100px 100px;
+  background: #5893ef;
+  color: #ffffff;
+}
+</style>

package/src/components/runtime/views/assemblys/data/component/attr-style.vue

@@ -0,0 +1,64 @@
+<template>
+        <el-collapse-item
+              title="表头"
+              name="tableHeader"
+              class="amb-design-attr-group-header">
+          <div style="padding:8px 0px 0px 0px;">
+	          <el-form-item label="表头Class" class="amb-design-attr-item">
+		          <el-input v-model="configure.style.tableHeader.class" />
+	          </el-form-item>
+	          <el-form-item label="表头Style" class="amb-design-attr-item">
+		          <el-input
+				          v-model="configure.style.tableHeader.style"
+				          style="width: 240px"
+				          :autosize="{ minRows: 4 }"
+				          type="textarea"
+				          placeholder="Please input"
+		          />
+	          </el-form-item>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item
+              title="行背景颜色动态设置"
+              name="rowBackgroundColor"
+              class="amb-design-attr-group-header">
+	        <RowBackgroudColor :list="configure.style.rowStyle" />
+        </el-collapse-item>
+	<CommonStylePosition :configure="configure"/>
+	<CommonStyleMargin v-if="blankOption.showMargin" :configure="configure"/>
+	<CommonStylePadding v-if="blankOption.showPadding" :configure="configure"/>
+	<CommonStyleBorder v-if="blankOption.showBorder" :configure="configure"/>
+	<CommonStyleShadow v-if="blankOption.showShadow" :configure="configure"/>
+	<CommonStyleCursor v-if="blankOption.showCursor" :configure="configure" />
+	<CommonStyleCustom v-if="blankOption.showCustom" :configure="configure" />
+</template>
+<script lang='ts' setup>
+import { defineProps,reactive } from 'vue';
+import DimensionInput from '../../form/common/dimension-input.vue'
+import RowBackgroudColor from './row-backgroud-color.vue'
+import CommonStylePosition from '../../common/common-style-position.vue';
+import CommonStyleMargin from '../../common/common-style-margin.vue';
+import CommonStylePadding from '../../common/common-style-padding.vue';
+import CommonStyleBorder from '../../common/common-style-border.vue';
+import CommonStyleShadow from '../../common/common-style-shadow.vue';
+import CommonStyleCursor from '../../common/common-attr-cursor.vue';
+import CommonStyleCustom from '../../common/common-style-custom.vue';
+const props = defineProps({
+	configure: {
+		type: Object,
+		default: () => ({ }) // 设置默认值
+	},
+	blankOption:{
+		type:Object,
+		default:{
+			showTittleFont:true, // 是否显示标题字体
+			showBackground:true, // 是否显示背景
+			showBorder:true, // 是否显示边框
+			showShadow:true, // 是否显示阴影
+			showCursor:true, // 是否显示鼠标手势
+			showClass:true, // 是否显示class
+			showCustom:true, // 是否显示自定义
+		}
+	}
+});
+</script>

package/src/components/runtime/views/assemblys/data/component/column-config.vue

@@ -0,0 +1,171 @@
+<template>
+	<div>
+		<el-dialog
+				model-value
+				title="Tips"
+				width="800"
+				:before-close="beforeClose"
+		>
+			<el-button type="primary" style="margin:8px 0">确定</el-button>
+			<el-table :data="tableData" style="width: 100%" @row-dblclick="handleCellEnter" @row-click="rowClick" :cell-style="columnbackgroundStyle">
+				<el-table-column type="index" label="序号" align="center" width="60" />
+				<el-table-column label="操作" align="center" width="160">
+					<template #default="scope">
+						<el-button type="primary" plain @click="add">添加</el-button>
+						<el-button type="danger" plain @click="remove(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" align="center">
+					<template #header>
+						列名
+						<span style="color: red;">*</span>
+					</template>
+					<template #default="scope">
+						<el-input v-if="scope.row.isEdit" v-model="scope.row.columnName"/>
+						<span v-else>{{scope.row.columnName}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="变量名" align="center">
+					<template #default="scope">
+						<el-input v-if="scope.row.isEdit" v-model="scope.row.variableName"/>
+						<span v-else>{{scope.row.variableName}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="显示" align="center">
+					<template #default="scope">
+						<el-switch v-if="scope.row.isEdit" v-model="scope.row.show" />
+						<span v-else>{{scope.row.show}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="编辑组件" align="center">
+					<template #default="scope">
+						<el-select v-if="scope.row.isEdit" v-model="scope.row.moduleType" placeholder="请选择">
+							<el-option
+									v-for="item in getFormComponentOptions()"
+									:key="item.name"
+									:label="item.label"
+									:value="item.name"
+							/>
+						</el-select>
+						<span v-else>{{scope.row.moduleType}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="导出" align="center">
+					<template #default="scope">
+						<el-switch v-if="scope.row.isEdit" v-model="scope.row.export" />
+						<span v-else>{{scope.row.export}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="左右对齐" align="center">
+					<template #default="scope">
+						<el-select v-if="scope.row.isEdit" v-model="scope.row.align" placeholder="请选择">
+							<el-option label="靠左" value="left"/>
+							<el-option label="居中" value="center"/>
+							<el-option label="靠右" value="right"/>
+						</el-select>
+						<span v-else>{{scope.row.align}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="冻结" align="center">
+					<template #default="scope">
+						<el-select v-if="scope.row.isEdit" v-model="scope.row.disabled" placeholder="请选择">
+							<el-option label="是" :value="true"/>
+							<el-option label="否" :value="false"/>
+						</el-select>
+						<span v-else>{{scope.row.disabled}}</span>
+					</template>
+				</el-table-column>
+			</el-table>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="$emit('close')">取消</el-button>
+					<el-button type="primary" @click="$emit('close')">确定</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+<script lang='ts' setup>
+import { getFormComponentOptions } from '../../../../utils/assemblys-config.js'
+import { ref,confineProps } from 'vue';
+// const props = defineProps({
+// 	configure:Object
+// });
+
+const emit = defineEmits(['close'])
+
+const tableData = ref([
+	{
+		columnName: 'columnName',
+		variableName: 'variableName',
+		moduleType:'1',
+		show: true,
+		export:false,
+		align:'center',
+		disabled:false
+	},
+])
+const modelDableData = ref([
+	{
+		date: '2016-05-03',
+		name: 'Tom',
+		address: 'No. 189, Grove St, Los Angeles',
+	},
+	{
+		date: '2016-05-02',
+		name: 'Tom',
+		address: 'No. 189, Grove St, Los Angeles',
+	},
+	{
+		date: '2016-05-04',
+		name: 'Tom',
+		address: 'No. 189, Grove St, Los Angeles',
+	}
+])
+
+function rowClick() {
+	tableData.value.forEach(item =>{
+		item['isEdit'] = false
+	})
+}
+
+function handleCellEnter(row:object) {
+	tableData.value.forEach(item =>{
+		item['isEdit'] = false
+	})
+	row.isEdit = true
+}
+
+function handleCellLeave(row:object) {
+	row.isEdit = false
+}
+
+function add() {
+	let obj = {
+		columnName: 'columnName',
+		variableName: '',
+		moduleType:'1',
+		show: true,
+		export:false,
+		align:'center',
+		disabled:false
+	}
+	tableData.value.push(obj)
+}
+
+function remove(row:object) {
+	tableData.value = tableData.value.filter(item => item != row)
+}
+
+function beforeClose() {
+	emit('close')
+}
+
+function columnbackgroundStyle({ row, column, rowIndex, columnIndex }){
+	if (row.isEdit){
+		return {background:'rgb(88, 147, 239,.4)',border:'none'}
+	}
+}
+</script>
+<style scoped>
+</style>