super-page-runtime 1.0.12 → 1.0.14

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

@@ -0,0 +1,144 @@
+<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/src/components/runtime/views/assemblys/form/common/linkage.vue

@@ -0,0 +1,21 @@
+<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/src/components/runtime/views/assemblys/form/common/overall-height.vue

@@ -0,0 +1,20 @@
+<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/src/components/runtime/views/assemblys/form/common/overall-width.vue

@@ -0,0 +1,48 @@
+<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/src/components/runtime/views/assemblys/form/common/pre-suffix.vue

@@ -0,0 +1,33 @@
+<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/src/components/runtime/views/assemblys/form/common/rich-text.vue

@@ -0,0 +1,100 @@
+<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/src/components/runtime/views/assemblys/form/common/row-ul-li.vue

@@ -0,0 +1,55 @@
+<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/src/components/runtime/views/assemblys/form/common/setoption-table.vue

@@ -0,0 +1,86 @@
+<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/src/components/runtime/views/assemblys/form/common/size-input.vue

@@ -0,0 +1,65 @@
+<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/src/components/runtime/views/assemblys/form/common/suffixmodule.vue

@@ -0,0 +1,82 @@
+<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/src/components/runtime/views/assemblys/form/common/title.vue

@@ -0,0 +1,20 @@
+<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>