HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

hc_zhufu
zzq 2024-05-17 08:50:19 +08:00
parent 70cfeea7a0 fb218fd354
commit 4c6ba8d9a8
22 changed files with 672 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/demo/formScheme.ts
View File

@ -88,7 +88,7 @@ export function functionLoadFormSort(params: AccountParams) {
export function functionAddFormSort(params: FromSortModel) {
return defHttp.post({
url: Api.AddFormSort,
url: Api.AddFormSort + '?code=FormSort',
params,
});
}

16
src/components/FormViewer/index.vue
View File

@ -15,6 +15,7 @@
processId: String,
formVerison: String,
formRelationId: String,
flowFormData: Object,
});
props.formConfig.forEach((element) => {
element.componentProps.disabled = !element.disabled;
@ -49,9 +50,9 @@
keyValue: props.processId,
};
const data = await functionGetFormDataFormScheme(querys);
let obj =new Object()
data.forEach(element => {
obj[element.columnName] = element.value
let obj = new Object();
data.forEach((element) => {
obj[element.columnName] = element.value;
});
console.log(obj);
setFieldsValue({
@ -72,7 +73,14 @@
getForm,
});
onMounted(() => {
getFormHistory();
if (props.formVerison) {
getFormHistory();
} else {
console.log(props.flowFormData);
setFieldsValue({
...props.flowFormData,
});
}
});
</script>

54
src/components/MapboxMaps/InsertShp/index.vue
View File

@ -69,8 +69,18 @@
</div>
</div>
<div class="edit-info-div" v-show="current === 1">
<a-table :columns="columns" :data-source="dataList" :pagination="false" :bordered="true">
<a-table :columns="columns" :data-source="dataList" :pagination="false" :bordered="true" :scroll="{y: 260}">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'type'">
<a-select v-model:value="record.type" style="width: 120px;">
<a-select-option value="geometry">geometry</a-select-option>
<a-select-option value="varchar">varchar</a-select-option>
<a-select-option value="text">text</a-select-option>
</a-select>
</template>
<template v-if="column.key === 'length'">
<a-input v-model:value="record.length" />
</template>
<template v-if="column.key === 'refName'">
<a-input v-model:value="record.refName" />
</template>
@ -84,9 +94,10 @@
</template>
</template>
</a-table>
<div class="insert-list-button" @click="insertListItem">新增一条</div>
<div class="footer-button">
<a-button @click="current--">取消</a-button>
<a-button style="margin-left: 25px;" type="primary" @click="current++">下一步</a-button>
<a-button style="margin-left: 25px;" type="primary" @click="submitDataList">下一步</a-button>
</div>
</div>
<div class="submit-success" v-show="current === 2">
@ -110,6 +121,7 @@ import type { UploadChangeParam } from 'ant-design-vue';
import type { UploadProps } from 'ant-design-vue';
// import { uploadShp } from '@/api/sys/analysis.ts'
import axios from 'axios'
import { v4 as uuidv4 } from 'uuid';
const current = ref(0)
const fileList = ref<UploadProps['fileList']>([]);
@ -122,6 +134,7 @@ const uploadFrom = reactive({
})
const formRef = ref()
const dataList = ref([])
const isShp = ref(false)
// todo
const columns = [
{title: 'Shp原始字段',dataIndex: 'name',key: 'name'},
@ -180,7 +193,7 @@ const submitShp = () => {
"tableName": "aa"
}
let showData = data.heads.map(item => {
return {...item,refName:item.name.toLowerCase(),initName:item.name}
return {...item,refName:item.name.toLowerCase(),initName:item.name,key:uuidv4()}
})
dataList.value = showData
current.value++
@ -195,9 +208,24 @@ const closeModal = () => {
emits('update:openModal', false)
formRef.value.resetFields()
fileList.value = []
current.value = 0
}
const deleteListItem = (record) => {
dataList.value = dataList.value.filter(item => item.name !== record.name)
dataList.value = dataList.value.filter(item => item.key !== record.key)
}
const insertListItem = () => {
dataList.value.push({
key:uuidv4(),
name:'',
type:'',
length:'',
refName:'',
initName:'',
})
}
const submitDataList = () => {
console.log(dataList.value)
current.value++
}
</script>
@ -260,6 +288,24 @@ const deleteListItem = (record) => {
display: flex;
justify-content: flex-end;
}
.insert-list-button{
background-color: #91b0ff;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
user-select: none;
cursor: pointer;
height: 30px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
font-weight: 400;
transition: 1s;
}
.insert-list-button:hover{
font-weight: 900;
color:#000;
}
}
.submit-success{
.success-content{

59
src/components/MapboxMaps/LayerComponent/index.vue
View File

@ -12,8 +12,9 @@
</div>
</div>
<div class="show-layers">
<div class="show-layer-item" v-for="item in 10" :key='item'>
<a-checkbox/>
<div :class="`show-layer-item ${isSelected === item.id ? 'select-list-item': ''}`"
v-for="item in dataList" :key='item.id' @click="selectLayer(item.id)">
<a-checkbox v-model:checked="item.checked"/>
<a-image
:width="119"
:height="87"
@ -22,7 +23,7 @@
:preview="false"
:fallback="errorImage"/>
<div class="layer-item-text">
<div class="item-title">名称： {{ 111 }}</div>
<div class="item-title">名称： {{ item.name }}</div>
<div class="item-control">
<a-button type="primary" size="small" style="background-color:#09B66D;margin-right: 7px;">查看数据</a-button>
<a-button type="primary" size="small" style="background-color: #0081FF;">操作</a-button>
@ -35,16 +36,61 @@
<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { h, defineEmits } from "vue"
import { h, defineEmits, ref } from "vue"
import { errorImage } from "../util.ts"
const dataList = ref([
{
id:1,
name:"111",
checked:true,
},
{
id:2,
name:"222",
checked:false,
},
{
id:3,
name:"333",
checked:false,
},
{
id:4,
name:"444",
checked:false,
},
{
id:5,
name:"555",
checked:false,
},
{
id:6,
name:"666",
checked:false,
},
{
id:7,
name:"777",
checked:false,
},
{
id:8,
name:"888",
checked:false,
},
])
const isSelected = ref()
const emits = defineEmits(["changeOpenModal","changeOpenInsertShpModal"])
const changeClick = () => {
emits("changeOpenModal",true)
}
const openInsertShpModal = () => {
console.log(111)
emits("changeOpenInsertShpModal",true)
}
const selectLayer = (id:number) => {
isSelected.value = id
}
</script>
<style lang="scss" scoped>
@ -139,5 +185,8 @@ const openInsertShpModal = () => {
}
}
}
.select-list-item{
border:1px solid;
}
}
</style>

40
src/components/MapboxMaps/MapboxMap.vue
View File

@ -1,24 +1,24 @@
<template>
<div class="map-container">
<div id="mapContainer" class="map-box"></div>
<!-- <div class="map-control">
<img
v-for="(item, index) in nextMapControl"
:key="index"
:src="item.icon"
:title="item.title"
@click="handlerMapControlClick(item.handler)"
/>
<img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
</div> -->
<LayerComponent @changeOpenModal="changeOpenModal" @changeOpenInsertShpModal="changeOpenInsertShpModal"/>
<LayerControl />
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal"/>
<InsertShp v-model:openModal="insertShpModal" />
<DataListComponent />
<RightShowInfo />
</div>
</template>
<div class="map-container">
<div id="mapContainer" class="map-box"></div>
<!-- <div class="map-control">
<img
v-for="(item, index) in nextMapControl"
:key="index"
:src="item.icon"
:title="item.title"
@click="handlerMapControlClick(item.handler)"
/>
<img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
</div> -->
<LayerComponent @changeOpenModal="changeOpenModal" @changeOpenInsertShpModal="changeOpenInsertShpModal"/>
<LayerControl />
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal"/>
<InsertShp v-model:openModal="insertShpModal" />
<DataListComponent />
<RightShowInfo />
</div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, defineProps, reactive, ref } from 'vue';

96
src/components/MapboxMaps/Modal/ServeResource/index.vue
View File

@ -20,7 +20,7 @@
</a-select>
</div>
<div class="content">
<div class="show-item" v-for="item in 10" :key="item">
<div class="show-item" v-for="item in 10" :key="item" @click="showInfo">
<div class="info">
<a-image
:width="119"
@ -36,6 +36,9 @@
</div>
</div>
<div class="button">
<a-button type="primary" style="background-color:#09B66D;margin-right: 10px">
编辑
</a-button>
<a-button type="primary">
<template #icon>
<PlusOutlined />
@ -54,13 +57,14 @@
</div>
<div class="information">
<div style="margin-bottom: 16px">
<a-image
style="border-radius:4px"
:width="'100%'"
:height="266"
src="https://www.antdv.com/#error"
:fallback="errorImage"
/>
<div style="width: 100%;height:266px;">
<MapboxMap
:mapOptions="mapOptions"
:control="mapDrawControl"
@map-on-load="mapOnLoad"
@map-draw="handlerMapDraw"
/>
</div>
</div>
<div class="show-info">
<div class="title">
@ -69,43 +73,75 @@
</div>
<div style="position:absolute;height:32px;top:24px;display:flex;align-items:center;margin-left:14px">服务基本信息</div>
<div class="serve-text">
<div class="serve-info">
<div><span class="info-title">服务URL:</span><span class="info-content">{{ "http://t0.tianuditu.gov.cn/shuishen_w/wmts" }}</span></div>
<div><span class="info-title">服务名称:</span><span class="info-content">{{ "http://t0.tianuditu.gov.cn/shuishen_w/wmts" }}</span></div>
<div><span class="info-title">服务简介:</span><span class="info-content">{{ "http://t0.tianuditu.gov.cn/shuishen_w/wmts" }}</span></div>
<div><span class="info-title">关键字:</span><span class="info-content">{{ "http://t0.tianuditu.gov.cn/shuishen_w/wmts" }}</span></div>
<div><span class="info-title">服务类型:</span><span class="info-content">{{ "http://t0.tianuditu.gov.cn/shuishen_w/wmts" }}</span></div>
<div><span class="info-title">覆盖范围:</span><span class="info-content">{{ "http://t0.tianuditu.gov.cn/shuishen_w/wmts" }}</span></div>
<div><span class="info-title">坐标系:</span><span class="info-content">{{ "http://t0.tianuditu.gov.cn/shuishen_w/wmts" }}</span></div>
<div><span class="info-title">投影类型:</span><span class="info-content">{{ "http://t0.tianuditu.gov.cn/shuishen_w/wmts" }}</span></div>
<div><span class="info-title">使用权限:</span><span class="info-content">{{ "http://t0.tianuditu.gov.cn/shuishen_w/wmts" }}</span></div>
<div><span class="info-title">发布时间:</span><span class="info-content">{{ "http://t0.tianuditu.gov.cn/shuishen_w/wmts" }}</span></div>
<div><span class="info-title">服务预览:</span><span class="info-content">{{ "http://t0.tianuditu.gov.cn/shuishen_w/wmts" }}</span></div>
</div>
<div class="serve-image">
<div style="margin-bottom: 11px;"><span style="opacity: 0.41;">预览图:</span></div>
<a-image
style="border-radius:4px"
:width="'100%'"
:height="227"
src="https://www.antdv.com/#error"
:fallback="errorImage"/>
</div>
<a-textarea v-model:value="jsonData" style="height: 270px;"/>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { errorImage } from '../../util.js'
import { ref } from "vue"
import MapboxMap from '@/components/MapboxMaps/index.vue'
import { DrawingType } from '@/enums/mapEnum';
const data = ref('vector-data')
const sort = ref('default')
const key = ref('')
const current = ref()
const pageSize = ref()
const jsonData = ref('')
const mapOptions = {
center: [116.404, 39.905],
zoom: 8,
};
const mapDrawControl: DrawingType[] = [DrawingType.Polygon, DrawingType.Line];
const mapOnLoad = (map) => {
// map 对象
console.log('map::: ', map);
// mapU封装对象
console.log('map.U::: ', map.U);
// 测试地址
const testSource =
'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
// 添加矢量瓦片图层
map.U.addVector('sourceId', testSource).addLineLayer('layerId', {
source: 'sourceId',
'source-layer': 'lindi', // source-layer对应数据库的表名
});
};
//地图绘制的回调
const handlerMapDraw = (type: string, data: any) => {
console.log('data::: ', data);
console.log('type::: ', type);
};
const showInfo = () => {
console.log(111111)
let data = {
sources:{
vectorSource: {
type: "vector",
url: "mapbox://mapbox.mapbox-streets-v6",
tiles: [
"http://a.example.com/tiles/{z}/{x}/{y}.pbf",
"http://b.example.com/tiles/{z}/{x}/{y}.pbf"
],
bounds: [-180,-85.051129,180,85.051129],
scheme:"xyz",
minzoom: 0,
maxzoom: 22,
attribution: "",
}
}
}
jsonData.value = JSON.stringify(data, null, 4);
console.log(jsonData.value)
}
</script>
<style lang="scss" scoped>

30
src/components/MapboxMaps/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="map-container">
<div id="mapContainer" class="map-box"></div>
<div :id="`mapContainer-${id}`" class="map-box"></div>
<div class="map-control">
<img
v-for="(item, index) in nextMapControl"
@ -11,12 +11,6 @@
/>
<img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
</div>
<LayerComponent @changeOpenModal="changeOpenModal" @changeOpenInsertShpModal="changeOpenInsertShpModal"/>
<LayerControl />
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal"/>
<InsertShp v-model:openModal="insertShpModal" />
<DataListComponent />
<RightShowInfo />
</div>
</template>
@ -29,24 +23,8 @@
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
import { MP } from './src/MP';
import { DrawingType } from '@/enums/mapEnum';
import LayerComponent from './LayerComponent/index.vue'
import LayerControl from './LayerControl/index.vue'
import UseModal from './Modal/index.vue'
import InsertShp from './InsertShp/index.vue'
import DataListComponent from './DataListComponent/index.vue'
import RightShowInfo from './RightShowInfo/index.vue'
const openModal = ref(false);
const insertShpModal = ref(false)
const changeOpenModal = (value) => {
openModal.value = value
}
const changeOpenInsertShpModal = (value) => {
console.log(2222222)
insertShpModal.value = value
console.log(insertShpModal.value)
}
import { v4 as uuidv4 } from 'uuid';
const id = uuidv4()
// map参数类型
interface MapboxOptionsInterface {
mapOptions: mapboxgl.MapboxOptions;
@ -88,7 +66,7 @@
// 返回地图实例
const initMap = () => {
return new mapboxgl.Map({
container: 'mapContainer',
container: `mapContainer-${id}`,
language: 'zh-cmn',
projection: 'equirectangular', // wgs84参考系
style: MapboxDefaultStyle,

4
src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue
View File

@ -171,7 +171,7 @@
});
};
const handleFieldTableChange = (e) => {
console.log('cccccc', e);
// console.log('cccccc', e);
fieldTableValue.value = e;
fetch();
inputOptions.value.forEach((item) => {
@ -289,6 +289,8 @@
if (func) {
func(formConfig.value.currentItem!.componentProps, allOptions.value);
}
fieldTableValue.value = formConfig.value?.currentItem?.componentProps?.dataTable;
handleFieldTableChange(formConfig.value?.currentItem?.componentProps?.dataTable);
},
{
immediate: true,

57
src/views/demo/form-design/components/VFormDesign/index.vue
View File

@ -4,37 +4,39 @@
:class="`left ${prefixCls}-sider`"
collapsible
collapsedWidth="0"
width="270"
width="300"
:zeroWidthTriggerStyle="{
'margin-top': '-70px',
'background-color': 'gray',
}"
breakpoint="md"
>
<CollapseContainer title="基础控件">
<CollapseItem
:list="baseComponents"
:handleListPush="handleListPushDrag"
@add-attrs="handleAddAttrs"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<CollapseContainer title="自定义控件">
<CollapseItem
:list="customComponents"
@add-attrs="handleAddAttrs"
:handleListPush="handleListPushDrag"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<CollapseContainer title="布局控件">
<CollapseItem
:list="layoutComponents"
:handleListPush="handleListPushDrag"
@add-attrs="handleAddAttrs"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<div class="collapseItem-box">
<CollapseContainer title="基础控件">
<CollapseItem
:list="baseComponents"
:handleListPush="handleListPushDrag"
@add-attrs="handleAddAttrs"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<CollapseContainer title="自定义控件">
<CollapseItem
:list="customComponents"
@add-attrs="handleAddAttrs"
:handleListPush="handleListPushDrag"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
<CollapseContainer title="布局控件">
<CollapseItem
:list="layoutComponents"
:handleListPush="handleListPushDrag"
@add-attrs="handleAddAttrs"
@handle-list-push="handleListPush"
/>
</CollapseContainer>
</div>
</LayoutSider>
<LayoutContent>
<Toolbar
@ -396,4 +398,9 @@
background-color: #fff;
}
}
.collapseItem-box {
height: calc(100vh - 60px);
overflow: auto;
}
</style>

1
src/views/demo/form-design/components/VFormItem/index.vue
View File

@ -23,7 +23,6 @@
v-else-if="schema.component == 'Divider' && schema.label && !formItemProps.hiddenLabel"
>{{ schema.label }}
</Divider>
<div v-if="schema.component == 'Divider'"> 123 </div>
<!-- 部分控件需要一个空div -->
<div>

45
src/views/demo/form-design/core/formItemConfig.ts
View File

@ -8,43 +8,42 @@ import { ComponentType } from '@/components/Form/src/types';
import { componentMap as Cmp } from '../components';
import { Component } from 'vue';
import { getDeptList,getAccountList,getPosGroupList } from '@/api/demo/system';
import { getDeptList, getAccountList, getPosGroupList } from '@/api/demo/system';
//获取部门列表数据
const deptTreeData = await Promise.all([getDeptListData()])
function getDeptListData(){
const deptTreeData = await Promise.all([getDeptListData()]);
function getDeptListData() {
let param = {
page: 1,
limit: 9999
limit: 9999,
};
return getDeptList( param ).then( data => {
return data
})
return getDeptList(param).then((data) => {
return data;
});
}
//获取职级列表数据
const positionTreeData = await Promise.all([getPositionListData()])
function getPositionListData(){
const positionTreeData = await Promise.all([getPositionListData()]);
function getPositionListData() {
let param = {
page: 1,
limit: 9999
limit: 9999,
};
return getPosGroupList( param ).then( data => {
return data
})
return getPosGroupList(param).then((data) => {
return data;
});
}
//获取人员选择列表数据
const userTreeData = await Promise.all([getUserListData()])
function getUserListData(){
const userTreeData = await Promise.all([getUserListData()]);
function getUserListData() {
let param = {
page: 1,
limit: 9999
limit: 9999,
};
return getAccountList( param ).then( data => {
return data.items
})
return getAccountList(param).then((data) => {
return data.items;
});
}
const componentMap = new Map<string, Component>();
//如果有其它控件，可以在这里初始化
@ -98,7 +97,7 @@ export const customComponents: IVFormComponent[] = [
field: '',
colProps: { span: 24 },
componentProps: {
fieldNames:{
fieldNames: {
children: 'children',
label: 'name',
value: 'id',
@ -113,7 +112,7 @@ export const customComponents: IVFormComponent[] = [
field: '',
colProps: { span: 24 },
componentProps: {
fieldNames:{
fieldNames: {
children: 'children',
label: 'name',
value: 'id',

274
src/views/demo/onlineform/formCall/CreateFlow.vue Normal file
View File

@ -0,0 +1,274 @@
<template>
<PageWrapper :class="prefixCls">
<div class="btn-box">
<a-button type="primary" :icon="h(SendOutlined)" @click="handleSubmit" class="ml-2"
>提交
</a-button>
<a-button
type="primary"
:icon="h(CloseCircleOutlined)"
@click="closePreview"
class="ml-2"
danger
>关闭
</a-button>
</div>
<a-tabs v-model:activeKey="activeName" @change="changeActive">
<a-tab-pane key="form" tab="表单信息" v-if="formVisble">
<FormViewer
ref="formBoxRef"
:formConfig="formConfig"
:flowFormData="props.flowFormData"
v-if="formVisble"
/>
</a-tab-pane>
<a-tab-pane key="flow" tab="流程信息" force-render>
<div class="process-design" :style="'display: flex; height:' + designerData.height">
<process-viewer :key="`designer-${code}`" :xml="flowContent" v-if="processVisble" />
<div
class="form-box"
v-if="
designerData.isCustmerTitle ||
(designerData.delegateUsers && designerData.delegateUsers.length > 0)
"
>
<a-form
ref="formRef"
:model="formData"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item
ref="title"
label="流程标题"
name="title"
v-if="designerData.isCustmerTitle"
>
<a-input v-model:value="formData.title" />
</a-form-item>
<a-form-item
label="流程发起人"
name="userId"
v-if="designerData.delegateUsers && designerData.delegateUsers.length > 0"
>
<a-select
v-model:value="formData.userId"
placeholder="请选择"
:options="designerData.delegateUsers"
/>
</a-form-item>
</a-form>
</div>
</div>
</a-tab-pane>
</a-tabs>
</PageWrapper>
</template>
<script lang="ts" setup>
import { h, ref, reactive, onBeforeMount } from 'vue';
import { ProcessViewer } from '@/components/ProcessViewer/index';
import { PageWrapper } from '@/components/Page';
import { FormViewer } from '@/components/FormViewer';
import { SendOutlined, SaveOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import { getDetail } from '@/api/sys/WFSchemeInfo';
import { create, saveDraft } from '@/api/sys/WFProcess';
import { getLoadMyUserList } from '@/api/sys/WFDelegate';
import { functionsaveForm, LoadFormScheme } from '@/api/demo/formScheme';
import { useUserStore } from '@/store/modules/user';
import { buildGUID } from '@/utils/uuid';
import { IFormConfig } from '@/views/demo/form-design/typings/v-form-component';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
const formBoxRef = ref<any>();
const userStore = useUserStore();
const userInfo: any = userStore.getUserInfo;
const prefixCls = 'preview-box';
const flowContent = ref('');
const formRef = ref();
const labelCol = { span: 7 };
const wrapperCol = { span: 13 };
const formVisble = ref(false);
const processVisble = ref(false);
const props = defineProps({
code: String,
flowFormData: {
type: Object,
default: () => {
return {};
},
},
});
const emit = defineEmits(['closeModel']);
const keyValue = ref('');
// 表单数据
const formConfig = ref<IFormConfig>({
// 表单配置
schemas: [],
layout: 'horizontal',
labelLayout: 'flex',
labelWidth: 100,
labelCol: {},
wrapperCol: {},
currentItem: {
component: '',
componentProps: {},
},
activeKey: 1,
});
const designerData = reactive({
loading: false,
xmlString: '',
controlForm: {
prefix: 'flowable',
},
height: document.documentElement.clientHeight - 230.5 + 'px;',
midVisible: false,
isCustmerTitle: false,
nodeUsers: [],
selectUsersVisible: false,
isDraft: false,
delegateUsers: [],
formVerison: '',
formCode: '',
formCurrentNode: {},
});
const activeName = ref('form');
const formData = reactive({
userId: '',
title: '',
});
const rules = reactive({
title: [{ required: true, message: '请选择流程标题', trigger: 'blur' }],
userId: [{ required: true, message: '请选择流程发起人', trigger: 'blur' }],
});
function changeActive(activeKey) {
if (activeKey == 'flow') {
processVisble.value = true;
}
}
async function getDetailInfo() {
let data = await getDetail({ code: props.code });
flowContent.value = data.scheme.flowContent;
formData.userId = userInfo.id;
let content = JSON.parse(data.scheme.content);
let wfData = content.wfData;
const currentNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
if (currentNode.authFields.length > 0) {
formVisble.value = true;
} else {
processVisble.value = true;
activeName.value = 'flow';
}
formConfig.value = currentNode.authFields;
designerData.formCurrentNode = currentNode;
getFormHistory();
}
async function getDelegateUsers() {
const data = await getLoadMyUserList({
code: props.code,
});
designerData.delegateUsers = data;
}
function handleSubmit() {
var processId = buildGUID();
var querys = {
schemeId: designerData.formCurrentNode.formVerison,
isUpdate: false,
pkey: keyValue.value,
pkeyValue: processId,
};
// 有表单内容，先存表单信息
if (formVisble.value) {
if (!designerData.formCurrentNode.formRelationId) {
return createMessage.error('请设置表单和流程关联字段');
}
formBoxRef.value
.getForm()
.then(async (res) => {
res[designerData.formCurrentNode.formRelationId] = processId;
for (var item in res) {
if (res[item] == undefined) {
res[item] = '';
if (item.search('_input_guid') != -1) {
res[item] = buildGUID();
}
}
}
querys.data = JSON.stringify(res);
const formValue = await functionsaveForm(querys);
if (formValue) {
handleCreateFlow(processId);
}
})
.catch((error) => {
console.log(error);
activeName.value = 'form';
return;
});
} else {
handleCreateFlow(processId);
}
}
async function handleCreateFlow(processId) {
var querys = {
schemeCode: designerData.isDraft ? '' : props.code,
userId: formData.userId,
title: formData.title,
processId: processId,
};
if (!designerData.isDraft) {
await saveDraft(querys);
querys.schemeCode = '';
designerData.isDraft = true;
}
const data = await create(querys);
if (data) {
closePreview();
return createMessage.success('发起流程成功');
} else {
return createMessage.error('发起流程失败');
}
}
async function getFormHistory() {
const data = await LoadFormScheme({
schemeId: designerData.formCurrentNode.formVerison,
});
if (data) {
const scheme = JSON.parse(data.scheme);
scheme.formInfo.schemas.forEach((element) => {
if (element.field == designerData.formCurrentNode.formRelationId) {
keyValue.value = element.componentProps.fieldName;
}
});
}
}
function closePreview() {
emit('closeModel');
}
onBeforeMount(() => {
getDetailInfo();
getDelegateUsers();
});
</script>
<style lang="less" scoped>
.preview-box {
background-color: @component-background;
.btn-box {
padding: 10px;
justify-content: flex-end;
display: flex;
}
}
::v-deep .anticon svg {
width: 1em !important;
height: 1em !important;
}
.form-box {
width: 480px;
}
</style>

82
src/views/demo/onlineform/formCall/index.vue
View File

@ -25,6 +25,16 @@
</template>
</BasicTable>
<CallModal @success="submitsuccess" @register="registerModal" />
<a-modal
width="100%"
wrap-class-name="full-modal"
v-model:open="previewOpen"
title="流程发起"
:destroyOnClose="true"
>
<template #footer> </template>
<CreateFlow ref="posRef" :code="flowCode" @closeModel="closeMolder" :flowFormData="flowFormData"/>
</a-modal>
</PageWrapper>
</template>
<script lang="ts" setup>
@ -40,6 +50,7 @@
import { useModal } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import CallModal from './CallModal.vue';
import CreateFlow from './CreateFlow.vue';
const { createConfirm, createMessage } = useMessage();
const route = useRoute();
@ -61,6 +72,9 @@
const treeData = ref<TreeItem[]>([]);
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
const actionList: TreeActionItem[] = [];
const previewOpen = ref(false); //是否打开流程发起弹窗
const flowCode = ref(''); //流程code
const flowFormData = ref({}); //编辑时表单的数据
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, setColumns, getSelectRows, clearSelectedRowKeys }] = useTable({
title: '表单列表',
@ -178,27 +192,47 @@
}
switch (status) {
case 'Add':
openModal(true, {
isDetail: false,
isUpdate: false,
tab: config.schemas,
query: query.value,
addParams: addParamsArr.value,
btnList: btnList.value,
btnList.value.forEach((element) => {
if (element.prop === 'Add' && element.isWFlow) {
flowCode.value = element.wFlowCode;
}
});
if (flowCode.value == '') {
openModal(true, {
isDetail: false,
isUpdate: false,
tab: config.schemas,
query: query.value,
addParams: addParamsArr.value,
btnList: btnList.value,
});
} else {
previewOpen.value = true;
}
break;
case 'Edit':
if (rows.length == 0) {
return createMessage.warn('请选择一条数据进行编辑');
}
openModal(true, {
isDetail: false,
isUpdate: true,
tab: config.schemas,
record: rows[0],
query: query.value,
btnList: btnList.value,
btnList.value.forEach((element) => {
if (element.prop === 'Add' && element.isWFlow) {
flowCode.value = element.wFlowCode;
}
});
if (flowCode.value == '') {
openModal(true, {
isDetail: false,
isUpdate: true,
tab: config.schemas,
record: rows[0],
query: query.value,
btnList: btnList.value,
});
} else {
previewOpen.value = true;
flowFormData.value = rows[0];
}
break;
case 'Delete':
if (rows.length == 0) {
@ -305,8 +339,28 @@
function submitsuccess() {
reload();
}
function closeMolder() {
previewOpen.value = false;
submitsuccess();
}
onMounted(() => {
getPublicForm();
});
</script>
<style lang="less">
.full-modal {
.ant-modal {
max-width: 100%;
top: 0;
}
.ant-modal-content {
height: calc(100vh);
}
.ant-modal-body {
height: 85%;
}
}
</style>

1
src/views/demo/onlineform/formModule/FormModal.vue
View File

@ -181,7 +181,6 @@
let sysModuleElement: any = [];
if (config.table.btns) {
config.table.btns.forEach((t) => {
console.log(t);
let temp: any = {};
temp.id = '';
temp.domId = t.prop;

2
src/views/demo/onlineform/formModule/config/columns.vue
View File

@ -73,7 +73,7 @@
});
// config
const config = inject('formConfig');
const config: any = inject('formConfig');
const columnsData = ref(config.table.columns);
// 展开全部
const columnsTreeRef = ref<Nullable<TreeActionType>>(null);

15
src/views/demo/onlineform/formModule/index.vue
View File

@ -8,7 +8,8 @@
:searchInfo="searchInfo"
>
<template #toolbar>
<a-button type="primary" @click="handleAddForm">新增</a-button>
<PermissionBtn @btn-event="onBtnClicked" />
<!-- <a-button type="primary" @click="handleAddForm">新增</a-button> -->
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'pmoduleId'">
@ -45,7 +46,7 @@
</template>
<script lang="ts" setup>
import { reactive, nextTick, ref, onMounted } from 'vue';
import { PermissionBtn } from '@/components/PermissionBtn/index';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
@ -175,6 +176,16 @@
reload();
}
function onBtnClicked(domId) {
switch (domId) {
case 'btnAdd':
handleAddForm();
break;
default:
break;
}
}
onMounted(() => {
fetch();
});

51
src/views/demo/onlineform/formModule/modalDesign.vue
View File

@ -62,22 +62,32 @@
},
]);
// 列表设置Checked
const columnsCheckedKeys = ref([]);
const columnsCheckedKeys: any = ref([]);
// 查询设置tree
const queryTree = ref([
const queryTree: any = ref([
{
label: '全选',
children: [],
},
]);
// 查询设置Checked
const queryCheckedKeys = ref([]);
const queryCheckedKeys: any = ref([]);
// 按钮设置tree
const btnsTree = ref([]);
const btnsTree: any = ref([]);
// 按钮设置Checked
const btnsCheckedKeys = ref([]);
const btnsCheckedKeys: any = ref([]);
const config = ref({
const notInColumns = [
'Divider',
'InputGuid',
'MapGemo',
'Upload',
'slot',
'Grid',
'StrengthMeter',
];
const config: any = ref({
layoutType: 1,
queryType: 1,
left: {
@ -158,7 +168,7 @@
],
});
const formScheme = ref('');
const formScheme: any = ref('');
// 表单验证
async function validateSteps(formVerison) {
@ -167,18 +177,19 @@
}
// 选中的历史记录表单
let keyValue = typeof formVerison === 'string' ? formVerison : formVerison.value;
const scheme = await functionGetPreviewForm({ keyValue: keyValue });
// const scheme = await functionGetPreviewForm({ keyValue: formVerison });
// console.log(scheme);
let query: any = { keyValue: keyValue };
const scheme: any = await functionGetPreviewForm(query);
formScheme.value = JSON.parse(scheme.scheme);
const columns = [];
formScheme.value.formInfo.schemas.forEach((tab) => {
if (!(tab.component in ['Gridtable', 'Divider', 'Password', 'Viewtable', 'Card', 'Btn'])) {
const columns: any = [];
formScheme.value.formInfo.schemas.forEach((tab: any) => {
if (!notInColumns.includes(tab.component)) {
columns.push(tab);
}
});
console.log(columns);
const colunmsMap = {};
columns.forEach((item) => {
colunmsMap[item.field] = item;
@ -192,14 +203,15 @@
// 列表设置-树
columnsTree.value[0].children = [];
columns.map((t) => {
columnsTree.value[0].children.push({
let temp: any = {
key: t.field,
label: t.label,
value: t.label,
width: 120,
align: 'left',
isMinWidth: false,
});
};
columnsTree.value[0].children.push(temp);
});
// 查询设置-树
@ -214,7 +226,8 @@
});
// 常用按钮-树
const schemeInfo = await functionGetSchemeInfoEntity({ id: scheme.schemeInfoId });
let query2: any = { id: scheme.schemeInfoId };
const schemeInfo: any = await functionGetSchemeInfoEntity(query2);
if (schemeInfo.formType === 1) {
// 如果是视图表单就关闭部分按钮
btnsTree.value = config.value.btns.filter((t) =>
@ -251,13 +264,13 @@
}
// 设置预选的单选项
config.value.table.columns.forEach((t) => {
config.value.table.columns.forEach((t: any) => {
columnsCheckedKeys.value.push(t.key);
});
config.value.table.querys.forEach((t) => {
config.value.table.querys.forEach((t: any) => {
queryCheckedKeys.value.push(t.key);
});
config.value.table.btns.forEach((t) => {
config.value.table.btns.forEach((t: any) => {
btnsCheckedKeys.value.push(t.id);
});
}

3
src/views/demo/onlineform/formModule/modalForm-Modal.vue
View File

@ -152,7 +152,8 @@
});
// 预览
async function previewModal(record, Modal: IToolbarMethods) {
const preview = await functionGetPreviewForm({ keyValue: record.schemeId });
let query: any = { keyValue: record.schemeId };
const preview: any = await functionGetPreviewForm(query);
let scheme = JSON.parse(preview.scheme);
formConfig.value.schemas = scheme.formInfo.schemas;
Modal?.showModal(cloneDeep(formConfig.value));

5
src/views/demo/onlineform/formModule/modalForm.vue
View File

@ -190,7 +190,8 @@
formData.value.formCode = row.id;
formData.value.formCodeName = row.name;
// 表单选择回传数据变化后，版本变化
const historyData = await functionGetSchemePageList({ schemeInfoId: row.id });
let query: any = { schemeInfoId: row.id };
const historyData = await functionGetSchemePageList(query);
historyData.items.forEach((t) => {
formVerisons_temp.push({ label: t.createDate, value: t.id });
});
@ -221,7 +222,7 @@
async function setFormData(record) {
// info和scheme
let query: any = { id: record.formCode };
const result = await functionGetForm(query);
const result: any = await functionGetForm(query);
record.isSys = true;
formData.value = record;
formData.value.formVerison = result.info.schemeId;

15
src/views/demo/onlineform/formdesign/index.vue
View File

@ -14,8 +14,7 @@
:searchInfo="searchInfo"
>
<template #toolbar>
<!-- <PermissionBtn @btn-event="onBtnClicked" /> -->
<a-button type="primary" @click="handleAddForm">新增</a-button>
<PermissionBtn @btn-event="onBtnClicked" />
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'category'">
@ -65,7 +64,7 @@
</template>
<script lang="ts" setup>
import { reactive, nextTick, ref, onMounted } from 'vue';
import { PermissionBtn } from '@/components/PermissionBtn/index';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { TreeItem } from '@/components/Tree';
import { PageWrapper } from '@/components/Page';
@ -262,6 +261,16 @@
treeData.value = await functionLoadFormSort();
}
function onBtnClicked(domId) {
switch (domId) {
case 'btnAdd':
handleAddForm();
break;
default:
break;
}
}
onMounted(() => {
fetch();
});

3
src/views/demo/onlineform/formdesign/modal/AutomaticModal.vue
View File

@ -114,7 +114,8 @@
// 异步传参
const [automaticModal, { closeModal }] = useModalInner(async (data) => {
if (!props.isAddVisible) {
let result = await functionGetForm({ id: data.saveFormDatas.info.id });
let query: any = { id: data.saveFormDatas.info.id };
let result = await functionGetForm(query);
let result_json = JSON.parse(result.scheme.scheme);
let data_json = JSON.parse(data.saveFormDatas.scheme.scheme);
data_json.db = result_json.db;

1
src/views/demo/workflow/task/process/audit.vue
View File

@ -252,6 +252,7 @@
let content = JSON.parse(data.scheme.content);
let wfData = content.wfData;
const currentNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
console.log(currentNode);
if (currentNode.authFields.length > 0) {
formVisble.value = true;
} else {