super-page-runtime 1.0.16 → 1.3.13

package/components/runtime/views/assemblys/form/common/icon-set-dialog.vue

@@ -1,144 +0,0 @@
-<template>
-	<el-input v-model="iconValue" @click="openDialog">
-		<template #append>
-			<el-button :icon="Search" @click="openDialog" />
-		</template>
-	</el-input>
-	<el-dialog
-			v-model="dialogVisible"
-			title="选择icon"
-			width="40%"
-	>
-		<div class="icon-set-center-body">
-			<div class="icon-set-center-creation" @click="addIconDialogVisible = true">
-				<el-icon><Plus /></el-icon>
-				<span>新建</span>
-			</div>
-			<div v-for="(item,index) in iconList" :key="index" :class="selectIconName === item.name?'icon-set-center-item icon-set-center-item-border':'icon-set-center-item'" @click="selectIcon(item.name)">
-				<component style="width: 40px;height: 40px" :is="item.icon" />
-				<span>{{ item.name }}</span>
-			</div>
-		</div>
-		<template #footer>
-			<div class="dialog-footer">
-				<el-button @click="dialogVisible = false">取消</el-button>
-				<el-button type="primary" @click="addIcon">
-					确定
-				</el-button>
-			</div>
-		</template>
-	</el-dialog>
-	<el-dialog
-			v-model="addIconDialogVisible"
-			title="创建icon"
-			width="30%"
-	>
-		<el-form :model="form" label-width="80px">
-			<el-form-item label="类名" prop='name' :rules="[{ required: true, message: '请输入类名', trigger: 'blur' }]">
-				<el-input size="default" v-model="form.name"  />
-			</el-form-item>
-			<el-form-item label="标准按钮">
-				<el-select size="default" v-model="form.region" placeholder="please select your zone">
-					<el-option label="Zone one" value="shanghai" />
-					<el-option label="Zone two" value="beijing" />
-				</el-select>
-			</el-form-item>
-			<el-form-item label="备注">
-				<el-input size="default" v-model="form.name" />
-			</el-form-item>
-		</el-form>
-		<template #footer>
-			<div class="dialog-footer">
-				<el-button @click="addIconDialogVisible = false">取消</el-button>
-				<el-button type="primary" @click="addIconDialogVisible = false">
-					确定
-				</el-button>
-			</div>
-		</template>
-	</el-dialog>
-</template>
-
-<script lang="ts" setup>
-import { Search,Plus,ChatLineRound,Unlock,MuteNotification,Operation,WarningFilled } from '@element-plus/icons-vue'
-import {ref, reactive, watch} from "vue";
-
-const props = defineProps({
-	modelValue:{
-		type:String,
-		default:''
-	}
-})
-
-const emit = defineEmits(['update:modelValue'])
-const iconValue = ref(props.modelValue);
-const dialogVisible = ref(false)
-const selectIconName = ref('')
-const addIconDialogVisible = ref(false)
-const form = reactive({})
-
-const iconList = [
-	{name:'ChatLineRound',icon:ChatLineRound},
-	{name:'Unlock',icon:Unlock},
-	{name:'MuteNotification',icon:MuteNotification},
-	{name:'Operation',icon:Operation},
-	{name:'WarningFilled',icon:WarningFilled},
-]
-
-watch(() =>props.modelValue,newVal =>{
-	iconValue.value = newVal
-})
-
-function selectIcon(name:string) {
-	selectIconName.value = name
-}
-
-function openDialog() {
-	dialogVisible.value = true
-}
-
-function addIcon() {
-	console.log('%c描述-105701','color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px',selectIconName.value);
-	emit('update:modelValue',selectIconName.value)
-	dialogVisible.value = false
-}
-
-</script>
-
-<style scoped>
-.icon-set-center-body{
-	display: grid;
-	grid-template-columns:repeat(5,1fr);
-	grid-column-gap: 1px;
-}
-.icon-set-center-item{
-	width: 100%;
-	height: 80px;
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-	justify-content: center;
-	cursor: pointer;
-	border: 1px solid #eeeeee;
-}
-.icon-set-center-creation{
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	border: 1px solid #eeeeee;
-}
-.icon-set-center-item:hover{
-	background-color: #f2f6fc;
-}
-.icon-set-center-creation:hover{
-	background-color: #f2f6fc;
-}
-.icon-set-center-item-border{
-	border: 1px solid #5893ef;
-	z-index: 1;
-}
-.el-form-item{
-	margin-bottom: 20px;
-}
-</style>

package/components/runtime/views/assemblys/form/common/linkage.vue

@@ -1,21 +0,0 @@
-<template>
-	<el-collapse-item
-			title="联动"
-			name="linkage"
-			class="amb-design-attr-group-header">
-		<div style="padding:8px 0px 0px 0px;">
-			<el-form-item v-for="(item,index) in linkage" :key="index" :label="item.label" class="amb-design-attr-item">
-				<el-select v-model="item.vaule" placeholder="请选择">
-					<el-option label="1" value="1"></el-option>
-				</el-select>
-			</el-form-item>
-		</div>
-	</el-collapse-item>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-	linkage: Object,
-});
-</script>
-

package/components/runtime/views/assemblys/form/common/overall-height.vue

@@ -1,20 +0,0 @@
-<template>
-	<el-collapse-item
-				title="整体高"  
-				name="global-height"
-				class="amb-design-attr-group-header">
-				
-		<div style="padding:8px 0px 0px 0px;">
-				<el-form-item label="高度" class="amb-design-attr-item">
-						<DimensionInput v-model="overallHeight.height" v-model:selectedUnit="overallHeight.unit"/>
-				</el-form-item>
-		</div>
-	</el-collapse-item>
-</template>
-<script lang='ts' setup>
-import DimensionInput from './dimension-input.vue'
-defineProps({
-		overallHeight:Object
-});
-
-</script>

package/components/runtime/views/assemblys/form/common/overall-width.vue

@@ -1,48 +0,0 @@
-<template>
-	<el-collapse-item
-				title="整体宽"  
-				name="global-width"
-				class="amb-design-attr-group-header">
-		<div style="padding:8px 0px 0px 0px;">
-				<el-form-item label-width="0" class="amb-design-attr-item">
-					<el-checkbox v-model="overallWidth.layout">24格占位</el-checkbox>
-				</el-form-item>
-				<el-form-item label="栏数" class="amb-design-attr-item">
-					<GridNumSelect v-model="overallWidth.span" :options="units"/>
-				</el-form-item>
-				<el-form-item label="偏移栏数" class="amb-design-attr-item">
-					<GridNumSelect v-model="overallWidth.offset" :options="units"/>
-				</el-form-item>
-				<el-form-item label="响应尺寸xs" class="amb-design-attr-item">
-					<GridNumSelect v-model="overallWidth.xs" :options="units"/>
-				</el-form-item>
-				<el-form-item label="响应尺寸sm" class="amb-design-attr-item">
-					<GridNumSelect v-model="overallWidth.sm" :options="units"/>
-				</el-form-item>
-				<el-form-item label="响应尺寸md" class="amb-design-attr-item">
-					<GridNumSelect v-model="overallWidth.md" :options="units"/>
-				</el-form-item>
-				<el-form-item label="响应尺寸lg" class="amb-design-attr-item">
-					<GridNumSelect v-model="overallWidth.lg" :options="units"/>
-				</el-form-item>
-				<el-form-item label="响应尺寸xl" class="amb-design-attr-item">
-					<GridNumSelect v-model="overallWidth.xl" :options="units"/>
-				</el-form-item>
-				<el-form-item label="自定义" class="amb-design-attr-item">
-					<DimensionInput v-model:modelValue="inputValue" v-model:selectedUnit="selectedUnit"></DimensionInput>
-				</el-form-item>
-		</div>
-	</el-collapse-item>
-</template>
-<script lang='ts' setup>
-import DimensionInput from './dimension-input.vue'
-import GridNumSelect from './grid-num-select.vue'
-defineProps({
-		overallWidth:Object
-});
-const units = [];
-for (let index = 1; index <= 24; index++) {
-	units.push(index)
-}
-
-</script>

package/components/runtime/views/assemblys/form/common/pre-suffix.vue

@@ -1,33 +0,0 @@
-<template>
-	<el-collapse-item
-				title="前/后缀"  
-				name="preSuffix"
-				class="amb-design-attr-group-header">
-			<div style="padding:8px 0px 0px 0px;">
-				<el-form-item label="前缀图标" class="amb-design-attr-item">
-					<el-input v-model="preSuffix.preIcon" />
-				</el-form-item>
-				<el-form-item label="前缀文本" class="amb-design-attr-item">
-					<el-input v-model="preSuffix.preText" placeholder="请输入"/>
-				</el-form-item>
-				<el-form-item label="后缀图标" class="amb-design-attr-item">
-					<el-input v-model="preSuffix.sufIcon" />
-				</el-form-item>
-				<el-form-item label="后缀文本" class="amb-design-attr-item">
-					<el-input v-model="preSuffix.sufText" placeholder="请输入"/>
-				</el-form-item>
-				<el-form-item label="附加方式" class="amb-design-attr-item">
-					<el-radio-group v-model="preSuffix.position" class="ml-4">
-						<el-radio :value="'outer'">外部</el-radio>
-						<el-radio :value="'inner'">内藏</el-radio>
-					</el-radio-group>
-				</el-form-item>
-			</div>
-	</el-collapse-item>
-</template>
-<script lang='ts' setup>
-defineProps({
-		preSuffix:Object
-});
-
-</script>

package/components/runtime/views/assemblys/form/common/rich-text.vue

@@ -1,100 +0,0 @@
-<template>
-	<div style="width: 100%">
-		<!-- 此处注意写法v-model:content -->
-		<QuillEditor ref="myQuillEditor"
-		             theme="snow"
-		             :readOnly="readonly"
-		             v-model:content="content"
-		             :options="data.editorOption"
-		             contentType="html"
-		             @update:content="setValue()"
-		/>
-		<!-- 使用自定义图片上传 -->
-		<input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
-	</div>
-</template>
-
-<script setup>
-import { QuillEditor } from '@vueup/vue-quill'
-import '@vueup/vue-quill/dist/vue-quill.snow.css'
-import { reactive, onMounted, ref, toRaw, watch } from 'vue'
-
-const props = defineProps(['value','placeholder','readonly'])
-const emit = defineEmits(['updateValue'])
-const content = ref('')
-const myQuillEditor = ref()
-// 通过watch监听回显，笔者这边使用v-model:content 不能正常回显
-watch(() => props.value, (val) => {
-	toRaw(myQuillEditor.value).setHTML(val)
-}, { deep: true })
-const fileBtn = ref()
-
-const fontSize = ['12px', '13px', '14px', '15px', '16px', '18px', '20px', '24px', '28px', '32px', '36px'];
-const data = reactive({
-	content: '',
-	editorOption: {
-		modules: {
-			toolbar: [
-				['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-				["blockquote", "code-block"], // 引用
-				[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-				[{ script: "sub" }, { script: "super" }], // 上标/下标
-				[{ indent: '-1' }, { indent: '+1' }], // 缩进
-				[{ direction: 'rtl' }], // 文本方向
-				[{ size: fontSize }], // 字体大小
-				[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-				[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-				[{ font: [] }], // 字体种类
-				[{ align: [] }], // 对齐方式
-				['clean'], // 清除文本格式
-				['link', 'image'] // 链接、图片、视频
-			]
-		},
-		placeholder: props.placeholder
-	}
-})
-const imgHandler = (state) => {
-	if (state) {
-		fileBtn.value.click()
-	}
-}
-// 抛出更改内容，此处避免出错直接使用文档提供的getHTML方法
-const setValue = () => {
-	const text = toRaw(myQuillEditor.value).getHTML()
-}
-const handleUpload = (e) => {
-	const files = Array.prototype.slice.call(e.target.files)
-	// console.log(files, "files")
-	if (!files) {
-		return
-	}
-	const formdata = new FormData()
-	formdata.append('file', files[0])
-	backsite.uploadFile(formdata)  // 此处使用服务端提供上传接口
-			.then(res => {
-				if (res.data.url) {
-					const quill = toRaw(myQuillEditor.value).getQuill()
-					const length = quill.getSelection().index
-					quill.insertEmbed(length, 'image', res.data.url)
-					quill.setSelection(length + 1)
-				}
-			})
-}
-// 初始化编辑器
-onMounted(() => {
-	const quill = toRaw(myQuillEditor.value).getQuill()
-	if (myQuillEditor.value) {
-		quill.getModule('toolbar').addHandler('image', imgHandler)
-	}
-})
-</script>
-<style scoped>
-:deep(.ql-editor) {
-	min-height: 180px;
-}
-:deep(.ql-formats) {
-	height: 21px;
-	line-height: 21px;
-}
-</style>
-

package/components/runtime/views/assemblys/form/common/row-ul-li.vue

@@ -1,55 +0,0 @@
-<template>
-	<ul class="amb-design-attr-depttree-relevance-ul" style="width: 100%">
-		<li v-if="leftTittle" class="amb-design-attr-depttree-relevance-li" style="width: calc(100% - 30px)">
-			<span class="amb-design-attr-depttree-relevance-tittle">{{leftTittle}}</span>
-			<span class="amb-design-attr-depttree-relevance-tittle">{{rightTittle}}</span>
-		</li>
-		<li v-for="(item,index) in list" :key="index" class="amb-design-attr-depttree-relevance-li">
-			<span v-if="showIndex">{{ index + 1 + '、' }}</span>
-			<el-input v-if="type === 'input'" v-model="item.value" style="width:calc(100% - 5px)" />
-			<el-select v-else v-model="item.value" style="width:calc(100% - 5px)"  >
-				<el-option
-						label="姓名"
-						value="name"
-				/>
-			</el-select>
-			<el-input v-if="type === 'input'" v-model="item.label" style="width:calc(100% - 5px);margin-left: 10px" />
-			<el-select v-else v-model="item.label" style="width:calc(100% - 5px);margin-left: 10px" >
-				<el-option
-						label="姓名"
-						value="name"
-				/>
-			</el-select>
-			<el-icon style="width: 30px">
-				<Plus @click="addOrgFieldsItem" />
-				<Minus @click="reomveOrgFieldsItem(index)" />
-			</el-icon>
-		</li>
-	</ul>
-	<el-icon style="width: 30px">
-		<Plus v-if="!list ||list.length === 0" @click="addOrgFieldsItem" />
-	</el-icon>
-</template>
-
-<script setup lang="ts">
-import {Plus,Minus} from '@element-plus/icons-vue'
-const props = defineProps({
-	list:Array,
-	showIndex:Boolean,
-	type:String, // 显示的类型，select，input
-	leftTittle:String,
-	rightTittle:String
-});
-
-function addOrgFieldsItem(){
-	props.list.push({value:'',label:''})
-}
-
-function reomveOrgFieldsItem(index:number) {
-	props.list.splice(index,1)
-}
-</script>
-
-<style scoped>
-
-</style>

package/components/runtime/views/assemblys/form/common/setoption-table.vue

@@ -1,86 +0,0 @@
-<template>
-	<el-button type="primary" @click="dialogVisible = true">编辑</el-button>
-	<el-dialog
-			v-model="dialogVisible"
-			title="显示判断条件"
-			width="30%"
-	>
-		<el-row style="padding-bottom: 8px">
-			<el-button
-					:icon="ElIconCirclePlusOutline"
-					plain
-					type="primary"
-					@click="add"
-			>
-				添加
-			</el-button>
-			<el-button
-					:icon="ElIconDelete"
-					plain
-					type="primary"
-					@click="remove"
-			>
-				删除
-			</el-button>
-		</el-row>
-		<el-table highlight-current-row @current-change="handleCurrentChange" :data="list" style="width: 100%">
-			<el-table-column label="序号" type="index" />
-			<el-table-column prop="date" label="来源字段">
-				<template #default="scope">
-					<el-select
-							v-model="scope.row.leftBracket"
-							clearable
-							size="default"
-					>
-						<el-option label="字段1" value="1"/>
-						<el-option label="字段2" value="2"/>
-					</el-select>
-				</template>
-			</el-table-column>
-			<el-table-column prop="date" label="值字段">
-				<template #default="scope">
-					<el-select
-							v-model="scope.row.leftBracket"
-							clearable
-							size="default"
-					>
-						<el-option label="字段1" value="1"/>
-						<el-option label="字段2" value="2"/>
-					</el-select>
-				</template>
-			</el-table-column>
-		</el-table>
-		<template #footer>
-			<div class="dialog-footer">
-				<el-button @click="dialogVisible = false">取消</el-button>
-				<el-button type="primary" @click="dialogVisible = false">
-					确定
-				</el-button>
-			</div>
-		</template>
-	</el-dialog>
-</template>
-
-<script setup lang="ts">
-import {ref} from "vue";
-const props = defineProps({
-	list:Object
-});
-const dialogVisible = ref(false)
-const currentRow = ref({})
-function remove(){
-	props.list = props.list.filter(item => item !== currentRow.value)
-}
-function handleCurrentChange(val){
-	currentRow.value = val
-}
-function add(){
-	props.list.push({
-		date:'',
-	})
-}
-</script>
-
-<style scoped>
-
-</style>

package/components/runtime/views/assemblys/form/common/size-input.vue

@@ -1,65 +0,0 @@
-<template>
-  <el-input
-    v-model.number="inputValue"
-    placeholder=""
-    class="input-with-select"
-    @input="onInput"
-  >
-    <template #append>
-      <el-select
-        ref="select"
-        v-model="unit"
-        :style="{ width: '60px' }"
-        placeholder=""
-        @change="onChange"
-      >
-        <el-option
-          v-for="unit in units"
-          :key="unit.value"
-          :label="unit.label"
-          :value="unit.value"
-        />
-      </el-select>
-    </template>
-  </el-input>
-</template>
-
-<script lang="ts" setup>
-import { ref, defineProps } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    type: [Number],
-    default: null,
-  },
-  selectedUnit: {
-    type: String,
-    default: 'MB',
-  },
-});
-
-const emit = defineEmits(['update:modelValue', 'update:selectedUnit']);
-
-const inputValue = ref<Number>(props.modelValue);
-const unit = ref(props.selectedUnit);
-const units = [
-  { label: 'KB', value: 'KB' },
-  { label: 'MB', value: 'MB' },
-];
-
-function onInput(val: number) {
-	emit('update:modelValue', val);
-	emit('update:selectedUnit', unit);
-};
-
-function onChange(newUnit: string) {
-  unit.value = newUnit;
-  emit('update:selectedUnit', newUnit);
-};
-
-</script>
-<style>
-.input-with-select .el-input-group__append {
-  background-color: var(--el-fill-color-blank);
-}
-</style>

package/components/runtime/views/assemblys/form/common/suffixmodule.vue

@@ -1,82 +0,0 @@
-<template>
-	<el-form-item label="跳转页面" class="amb-design-attr-item">
-		<DataoriginInputtable v-model:modelValue="suffixModule.jumpPageUrl"></DataoriginInputtable>
-	</el-form-item>
-	<el-form-item label="打开方式" class="amb-design-attr-item">
-		<el-select
-				v-model="suffixModule.jumpPageOpenMode"
-				clearable
-				placeholder="请选择"
-		>
-			<el-option v-for="(item,index) in wayList" :key="index" :label="item.label" :value="item.value"/>
-		</el-select>
-	</el-form-item>
-	<el-form-item label="移动端打开" class="amb-design-attr-item">
-		<el-select
-				v-model="suffixModule.jumpPageMobileOpenMode"
-				clearable
-				placeholder="请选择"
-		>
-			<el-option v-for="(item,index) in wayList" :key="index" :label="item.label" :value="item.value"/>
-		</el-select>
-	</el-form-item>
-	<el-form-item label="弹窗标题" class="amb-design-attr-item">
-		<el-input v-model="suffixModule.jumpPageTitle" placeholder="请输入" />
-	</el-form-item>
-	<el-form-item label="标题国际化" class="amb-design-attr-item">
-		<el-input v-model="suffixModule.jumpPageTitleI18nKey" placeholder="请输入" />
-	</el-form-item>
-	<el-form-item label="弹窗宽度" class="amb-design-attr-item">
-		<el-input v-model="suffixModule.jumpPageWidth" placeholder="请输入" />
-	</el-form-item>
-	<el-form-item label="弹窗高度" class="amb-design-attr-item">
-		<el-input v-model="suffixModule.jumpPageHeight" placeholder="请输入" />
-	</el-form-item>
-	<el-form-item label="附加参数" class="amb-design-attr-item">
-		<RowUlLi :list="suffixModule.jumpPageAdditional"></RowUlLi>
-	</el-form-item>
-	<el-form-item label="图标" class="amb-design-attr-item">
-		<IconSetDialog v-model:modelValue="suffixModule.icon" />
-	</el-form-item>
-	<el-form-item label="自动拼接id" class="amb-design-attr-item">
-		<el-switch v-model="suffixModule.isNeedId" />
-	</el-form-item>
-	<el-form-item label="显示判断" class="amb-design-attr-item">
-		<Condition :list="suffixModule.buttonDisplayConditionsList"></Condition>
-	</el-form-item>
-	<el-form-item label="链接提示" class="amb-design-attr-item">
-		<el-input v-model="suffixModule.linkTips" placeholder="请输入" />
-	</el-form-item>
-	<el-form-item label="赋值回调" class="amb-design-attr-item">
-		<el-input v-model="suffixModule.updateValueEvent" placeholder="请输入" />
-	</el-form-item>
-	<el-form-item label="关闭弹窗事件" class="amb-design-attr-item-linefeed-two">
-		<el-input v-model="suffixModule.closeEvent" placeholder="请输入" />
-	</el-form-item>
-	<el-form-item label="关闭刷新父页面" class="amb-design-attr-item-linefeed-two">
-		<el-switch
-				v-model="suffixModule.isRefreshWhenClosePopup"
-		/>
-	</el-form-item>
-	<el-form-item label="赋值操作" class="amb-design-attr-item">
-		<RowUlLi :list="suffixModule.jumpPageAdditional"></RowUlLi>
-	</el-form-item>
-
-</template>
-<script lang='ts' setup>
-import RowUlLi from '../common/row-ul-li.vue'
-import Condition from '../../form/common/condition.vue'
-import DataoriginInputtable from './dataorigin-input-table.vue'
-import IconSetDialog from './icon-set-dialog.vue'
-const props = defineProps({
-  suffixModule:Object
-});
-
-const wayList = [
-	{label:'弹窗',value:'popup'},
-	{label:'新页签',value:'newTab'},
-	{label:'局部刷新',value:'refresh'},
-]
-
-</script>
-

package/components/runtime/views/assemblys/form/common/title.vue

@@ -1,20 +0,0 @@
-<template>
-	<el-collapse-item
-				title="标题"  
-				name="title"
-				class="amb-design-attr-group-header">
-		<div style="padding:8px 0px 0px 0px;">
-				<el-form-item label="宽度" class="amb-design-attr-item">
-						<DimensionInput v-model:modelValue="title.width" v-model:selectedUnit="title.unit"></DimensionInput>
-				</el-form-item>
-		</div>
-	</el-collapse-item>
-</template>
-<script lang='ts' setup>
-import DimensionInput from './dimension-input.vue'
-defineProps({
-		title:Object,
-		name:Array
-});
-
-</script>