ibsp-fg-page 4.0.2

package/src/views/designer/modules/headerWidgetModule/scriptLib/index.vue

@@ -0,0 +1,415 @@
+<script setup lang="jsx">
+import { ref, reactive } from 'vue';
+import { onMounted } from 'vue';
+import { View } from '@element-plus/icons-vue'
+import { computed } from 'vue';
+import { ElMessage } from 'element-plus'
+
+import PlatformLibLayout from '../components/PlatformLibLayout.vue';
+import MonacoEditor from '../components/MonacoEditor.vue';
+
+import { getPageScriptApi, saveOrUpdateApi, deleteBatchApi } from '@/api/ibsp-bg-app'
+// import MonacoEditor from '@/views/designer/rightConfigModule/baseComponent/components/MonacoEditor.vue';
+const dataList = ref([
+
+])
+const initCode = ref(`
+/**-------------------------------------------------
+以下可用方法: 
+  - message.success('提示文本') : 提示框 'success' | 'warning' | 'info' | 'error'
+
+----------------------------------------------------*/
+`)
+const data = ref([])
+
+const tableColumn = ref([
+  {
+    prop: 'scriptCode',
+    label: '编码',
+    align: 'center',
+  },
+  {
+    prop: 'scriptName',
+    label: '名称',
+    align: 'center',
+  },
+  {
+    prop: 'scriptContent',
+    label: '内容',
+    align: 'center',
+    slot: 'scriptContent'
+  },
+  {
+    prop: 'remark',
+    label: '备注',
+    align: 'center',
+  },
+  {
+    prop: 'scriptType',
+    label: '语言',
+    align: 'center',
+    width: '80px',
+    slot: 'scriptType'
+  },
+  {
+    prop: 'createTime',
+    label: '创建日期',
+    align: 'center',
+  },
+  {
+    prop: 'updateTime',
+    label: '上次修改日期',
+    align: 'center',
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    slot: 'status',
+    align: 'center',
+    width: '80px'
+  },
+  {
+    prop: 'operation',
+    label: '操作',
+    slot: 'operation',
+    align: 'center',
+    width: computed(()=>param.value.state === 'platform' ? '80px' : '200px')
+  }
+
+
+])
+const param = ref({
+  state: 'platform', // 默认选择平台级
+  pageSize: 10,
+  pageNo: 1,
+  total: 0,
+  change: (pageNo)=>{
+    param.value.pageNo = pageNo
+    getData(param.value)
+  }
+})
+
+/** */
+const formatDateTime = (dd) => {
+  if (!dd) {
+    return dd
+  }
+  const date = new Date(dd)
+  const y = date.getFullYear()
+  const m = date.getMonth() + 1
+  const d = date.getDate()
+  return `${y}年${m}月${d}日`
+}
+
+/**
+ *
+ */
+const getData = (param)=>{
+  getPageScriptApi({
+    appId: param.state === 'platform' ? '' : window.appId,
+    pageSize: param.pageSize,
+    pageNo: param.pageNo,
+    scriptName: param.scriptName || ''
+  }).then((res)=>{
+    if (res?.data?.records) {
+      data.value = res.data.records.map(item=>{
+        return {
+          ...item,
+          createTime: formatDateTime(item.createTime),
+          updateTime: formatDateTime(item.updateTime),
+        }
+      })
+      param.total = res.data.total
+    }
+  })
+}
+
+const statusOptions = {
+  'PT-PTK-ZT-JY': '禁用',
+  'PT-PTK-ZT-QY': '启用'
+}
+
+
+onMounted(()=>{
+  getData(param.value)
+})
+
+/** */
+const onSelectMenu = (id) => {
+  param.value.state = id
+  getData(param.value)
+}
+
+/** */
+const onChangeSearch = (value)=>{
+  getData({
+    ...param.value,
+    scriptName: value
+  })
+}
+
+const popupTitle = ref('新增脚本')
+const openViewScript = ref(false)
+const popupState = reactive({
+  open: false,
+  width: '50%',
+  height: '60%',
+  title: computed(()=>popupTitle.value),
+  slot: 'add',
+})
+const scriptForm = reactive(
+  {
+    scriptType: 'PT-PTK-FFLX-JS',
+    status: 'PT-PTK-ZT-QY',
+    scriptName: '',
+    scriptCode: '',
+    scriptContent: ' ',
+    remark: '',
+    id: ''
+  }
+)
+/** 清空 */
+const clearScriptForm = ()=>{
+  scriptForm.scriptType = 'PT-PTK-FFLX-JS'
+  scriptForm.status = 'PT-PTK-ZT-QY'
+  scriptForm.scriptName = ''
+  scriptForm.scriptCode = ''
+  scriptForm.scriptContent = ' '
+  scriptForm.remark = ''
+}
+
+// PT-PTK-ZT-JY : 禁用  PT-PTK-ZT-QY: 启用
+const scriptFormRules = reactive(Object.keys(scriptForm).reduce((pre, cur)=>{
+  // 排除不需要校验的必填字段
+  if (['remark'].includes(cur)) {
+    return pre
+  }
+  pre[cur] = [
+    { required: true, message: '请输入', trigger: 'blur' }
+  ]
+  return pre
+}, {})
+)
+/** 提交 */
+const onSubmit = ()=>{
+  saveOrUpdateApi(scriptForm).then((res)=>{
+    if (res?.success) {
+      ElMessage.success('保存成功')
+      getData(param.value)
+    }
+  })
+  popupState.open = false
+  clearScriptForm()
+}
+
+/** 取消 */
+const onClickCancel = ()=>{
+  popupState.open = false
+  clearScriptForm()
+}
+
+/** 编辑按钮 */
+const onClickEditBtn = (row)=>{
+  popupTitle.value = '编辑脚本'
+  popupState.open = true
+  scriptForm.scriptType = row.scriptType
+  scriptForm.status = row.status
+  scriptForm.scriptName = row.scriptName
+  scriptForm.scriptCode = row.scriptCode
+  scriptForm.scriptContent = row.scriptContent
+  scriptForm.remark = row.remark
+  scriptForm.id = row.id
+}
+/** 删除 */
+const onClickDelBtn = (row)=>{
+  ElMessageBox.confirm('此操作将永久删除该脚本, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 删除
+    deleteBatchApi([row.id]).then((res)=>{
+      if (res?.success) {
+        ElMessage.success('删除成功')
+        getData(param.value)
+      }
+    })
+  })
+    .catch(() => {
+      ElMessage.info('已取消删除')
+    })
+}
+const currentViewScriptValue = ref('')
+/** 查看脚本 */
+const onClickViewScript = (row)=>{
+  currentViewScriptValue.value = row.scriptContent
+  openViewScript.value = true
+}
+/** 关闭预览弹窗 */
+const onCloseView = ()=>{
+  currentViewScriptValue.value = ''
+  openViewScript.value = false
+}
+
+
+const getTools = computed(()=>{
+  return [
+    {
+      type: 'search',
+      placeholder: '请输入脚本名称',
+      label: '搜索脚本(名称)',
+      value: '',
+      style: {
+        width: '50%'
+      },
+      show: true,
+      change: onChangeSearch
+    },
+    {
+      type: 'add',
+      label: '新增',
+      show: (state = param.value.state)=>state === 'app',
+      popupState: popupState,
+      click: ()=>{
+        popupState.open = true
+      }
+    }
+  ]
+})
+
+
+</script>
+
+<template>
+  <div class="script-lib">
+    <PlatformLibLayout :data="data"
+                       v-model="param.state"
+                       :data-columns="tableColumn"
+                       @onSearch="onChangeSearch"
+                       :tools="getTools"
+                       :pagePrams="param"
+                       @onSelect="onSelectMenu">
+      <template #status="{row}">
+        <el-tag :type="row.status === 'PT-PTK-ZT-JY'?'info':'success'">{{ statusOptions[row.status] }}</el-tag>
+      </template>
+      <template #scriptContent="{row}">
+        <span class="script-content">{{ row.scriptContent }} </span>
+      </template>
+      <template #scriptType="{row}">
+        <span>{{ row.scriptType?.split('-')?.at?.(-1) || row.scriptType }} </span>
+      </template>
+      <template #operation="{row}">
+        <el-button
+          v-if="param.state === 'app'"
+          size="small"
+          type="primary"
+          @click="onClickEditBtn(row)"
+        >编辑</el-button>
+        <el-button
+          v-if="param.state === 'app'"
+          size="small"
+          type="danger"
+          @click="onClickDelBtn(row)"
+        >删除</el-button>
+        <el-button
+          size="small"
+          type="success"
+          @click="onClickViewScript(row)"
+        >查看</el-button>
+      </template>
+      <template #add>
+        <el-form
+          ref="ruleFormRef"
+          :model="scriptForm"
+          :rules="scriptFormRules"
+          label-width="80px"
+          status-icon
+          class="script-form"
+        >
+          <el-form-item label="类型" prop="scriptType" >
+            <el-radio-group v-model='scriptForm.scriptType'>
+              <el-radio label="PT-PTK-FFLX-JAVA">JAVA</el-radio>
+              <el-radio label="PT-PTK-FFLX-JS" >JS</el-radio>
+              <el-radio label="PT-PTK-FFLX-PYTHON">PYTHON</el-radio >
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="状态" prop="status" >
+            <el-radio-group v-model='scriptForm.status'>
+              <el-radio label="PT-PTK-ZT-QY" >{{ statusOptions['PT-PTK-ZT-QY'] }}</el-radio>
+              <el-radio label="PT-PTK-ZT-JY" >{{ statusOptions['PT-PTK-ZT-JY'] }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="名称" prop="scriptName" >
+            <el-input v-model='scriptForm.scriptName' />
+          </el-form-item>
+          <el-form-item label="编码" prop="scriptCode" >
+            <el-input v-model='scriptForm.scriptCode' />
+          </el-form-item>
+          <el-form-item label="内容"
+                        prop="scriptContent"
+                        class="script-add-content">
+            <MonacoEditor v-model='scriptForm.scriptContent' />
+          </el-form-item>
+          <el-form-item label="备注" prop="remark" >
+            <el-input v-model='scriptForm.remark' />
+          </el-form-item>
+          <el-form-item class="const-lib-add-submit">
+            <el-button class="ok-btn"
+                       type="primary"
+                       @click="onSubmit">确认</el-button>
+            <el-button class="cancel-btn" @click="onClickCancel">取消</el-button>
+          </el-form-item>
+
+        </el-form>
+      </template>
+    </PlatformLibLayout>
+
+    <MonacoEditor @onCloseView="onCloseView"
+                  :isView="true"
+                  :openView="openViewScript"
+                  v-model="currentViewScriptValue" />
+
+  </div>
+</template>
+
+<style lang="less" scoped>
+.script-lib {
+  width: 100%;
+  height: 100%;
+  .script-content{
+    //超出两行显示省略号
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  .const-lib-form{
+      position: relative;
+      height:calc(100% - 55px);
+    overflow: auto;
+
+    }
+    .const-lib-add-submit{
+    position: sticky;
+    bottom: 0;
+    left: 0;
+  }
+}
+</style>
+<style lang="less">
+.script-form {
+
+  &.el-form{
+    .script-add-content{
+      .el-form-item__content{
+    height: 150px !important;
+    margin-bottom: 30px;
+    border: 1px solid var(--theme-border-color);
+    border-radius: 2px;
+
+      }
+  }
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-component-lib/componentLib.service.ts

@@ -0,0 +1,17 @@
+import CommonLib from './src/componentLibs/index'
+
+
+export const getCommonLib = async ()=>{
+  return await CommonLib()
+}
+export default class ComponentLibService {
+
+  static name = 'componentLib'
+
+
+  constructor() {
+
+  }
+
+
+}

package/src/views/designer/modules/ibsp-component-lib/index.ts

@@ -0,0 +1,5 @@
+import IbspComponentLib from './src/index.vue'
+export { getCommonLib } from './componentLib.service'
+export default IbspComponentLib
+export * from './src/componentLibs/components/index'
+export * from './src/componentLibs/modules/core'

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/components/index.ts

@@ -0,0 +1,5 @@
+export { default as MiddlewareComponentDes} from './middleware/ComponentDes.vue';
+export { default as MiddlewareComponentPre} from './middleware/ComponentPre.vue';
+export { default as MiddlewareComponentFormItem} from './middleware/FormItemComponent.vue';
+export { default as MiddlewareComponentFormItemPre} from './middleware/FormItemComponentPre.vue';
+export {default as useContextData} from './middleware/useContextModel';

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/components/middleware/ComponentDes.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { inject, onMounted, provide, ref, computed, type Ref } from 'vue';
+import useComponentContext from '../../hooks/useComponentContext';
+
+import { useContextmenu } from '@/components/nextui/Contextmenu';
+import { DesignComponent } from '@/models/useComponentModel';
+import { IbspPage } from '@/models/page/IbspPage';
+import FormItemComponentMiddleware from './FormItemComponent.vue';
+import useContextData from './useContextModel';
+const formContainer = inject('formContainer', false);
+
+const props = withDefaults(defineProps<{
+    component:DesignComponent,
+    page:IbspPage,
+    style?:object,
+    disableClick?:boolean,
+    disableContextMenu?:boolean,
+}>(), {
+  style: () => ({}),
+  disableClick: false,
+  disableContextMenu: false
+})
+
+
+const emit = defineEmits<{
+  (e:'click', event:MouseEvent):void,
+  (e:'contextmenu', event:MouseEvent):void,
+  (e:'drag-end'):void,
+  (e: 'refLineChange', data: any): void
+}>()
+
+const onClickComponent = (e:MouseEvent) => {
+  if (props.disableClick) return
+  e.preventDefault()
+  props.component?.click?.(props.component)
+  emit('click', e)
+}
+
+
+const onContextmenuComponent = (e:MouseEvent) => {
+  if (props.disableContextMenu) return
+  useContextmenu(useComponentContext(props.component, props.page as any) as any).show((item:any)=>{
+    item.value(props.component, props.page)
+  })
+  props.component?.click?.()
+  emit('contextmenu', e)
+}
+
+
+const initDataModel = ()=>{
+  const component = props.component
+  const parentDataContainer = props.page.store.componentStore.queryParentDataContainer(component)
+  if (parentDataContainer) {
+    if (parentDataContainer.id === component.parentId) {
+      return computed(()=>useContextData({
+        store: component.store,
+        parentId: component.id
+      } as any))
+    }
+    return computed(()=>useContextData(component))
+  }
+  const _model = ref({
+    model: {},
+    item: {
+      data: {},
+      fields: []
+    },
+    target: 'data'
+  })
+  const dataModelValue = component.componentValue?.data?.dataModel
+  if (dataModelValue && !component.dataContainer) {
+    _model.value.model = props.page.useDataModel(component.componentValue.data?.dataModel, ({
+      watch: ()=>component.componentValue.data?.dataModel,
+      loaded: (res)=>{
+        _model.value.item.fields = res.selectFields.value
+        _model.value.item.data = (Array.isArray(res.data.value) ? res.data.value[0] : res.data.value)
+      }
+    }))
+  }
+  return _model
+
+}
+
+const dataModel = initDataModel()
+
+defineExpose({
+  onClickComponent,
+  onContextmenuComponent
+})
+</script>
+
+<template>
+  <template v-if="formContainer">
+    <FormItemComponentMiddleware
+      v-bind="$attrs"
+      :component="component"
+      :page="page"
+      :style="style"
+      :disableClick="disableClick"
+      :disableContextMenu="disableContextMenu"
+    ></FormItemComponentMiddleware>
+  </template>
+  <component
+    v-else
+    class="ibsp-component"
+    v-bind="$attrs"
+    :id="component.id"
+    :class="{
+      'design-hidden': component.baseStyle['--visibility'] === 'hidden',
+      [component.uId]:true
+    }"
+    :ref="(el) => component?.setRef?.(el)"
+    :data-id="`ibsp-${component.id}`"
+    :key="component.id"
+    :is="component.component"
+    :component="component"
+    :page="page"
+    :store="page.store"
+    :api="page.api"
+    :utils="page.utils"
+    :data="component.data"
+    :propsValues="component.componentValue!.props"
+    :dataValues="component.componentValue!.data"
+    :eventValues="component.componentValue!.event"
+    :style="{
+      ...component.getComponentStyles(),
+      ...style,
+
+    }"
+    :dataModel="dataModel"
+    :useDataSource="page.useDataSource"
+    @refLineChange="(data: any) => emit('refLineChange' , data)"
+    @click.stop="onClickComponent"
+    @contextmenu.stop.prevent="onContextmenuComponent"
+    @drag-end="emit('drag-end')"
+
+  />
+</template>
+
+<style scoped lang="less">
+.design-hidden{
+  opacity: 0.1 !important;
+  outline: 2px dashed var(--theme-font-color);
+}
+.form-item-wrap{
+  color: #000;
+  // width: 100%;
+  outline: 1px dashed #848282 !important;
+  background: #f5f5f5;
+  .form-item{
+    background: #f5f5f5;
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    &.position-label-left{
+      flex-direction: column;
+    }
+    >.form-item__label{
+
+    }
+    >.form-item__content{
+
+    }
+  }
+  &.active{
+    outline: 1px solid #1784FC !important;
+  }
+}
+.target-drop{
+  height: 5px;
+  width: 100%;
+  background: red;
+}
+</style>

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/components/middleware/ComponentPre.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { inject, ref, computed } from 'vue';
+import FormItemComponentPre from './FormItemComponentPre.vue';
+import useContextData from './useContextModel';
+const props = defineProps(['component', 'page', 'app'])
+const formContainer = inject('formContainer', false);
+const onMountedChild = () => {
+  props.page._componentMounted(props.component)
+}
+const initDataModel = ()=>{
+  const component = props.component
+  const parentDataContainer = props.page.store.componentStore.queryParentDataContainer(props.component)
+  if (parentDataContainer) {
+    if (parentDataContainer.id === component.parentId) {
+      return computed(()=>useContextData({
+        store: component.store,
+        parentId: component.id
+      }))
+    }
+    return computed(()=>useContextData(component))
+  }
+  const _model = ref({
+    model: {},
+    item: {
+      data: {},
+      fields: []
+    },
+    target: 'data'
+  })
+  const dataModelValue = component.componentValue?.data?.dataModel
+  if (dataModelValue && !component.dataContainer) {
+    _model.value.model = props.page.useDataModel(component.componentValue.data?.dataModel, ({
+      watch: ()=>component.componentValue.data?.dataModel,
+      loaded: (res)=>{
+        _model.value.item.fields = res.selectFields.value
+        _model.value.item.data = (Array.isArray(res.data.value) ? res.data.value[0] : res.data.value)
+      }
+    }))
+  }
+  return _model
+
+}
+
+const dataModel = initDataModel()
+</script>
+
+<template>
+  <template v-if="component.visible">
+    <template v-if="formContainer">
+      <FormItemComponentPre v-bind="{
+        ...props,
+        ...$attrs
+      }"></FormItemComponentPre>
+    </template>
+    <component
+      v-bind="$attrs"
+      @vue:mounted="onMountedChild"
+      v-on="component?.eventInstance?.events ?? {}"
+      :is="component.component"
+      :ref="(el) => component?.setRef?.(el)"
+      v-else
+      :id="component.id"
+      :component="component"
+      :page = "page"
+      :store = "page.store"
+      :api="page.api"
+      :app="app"
+      :dataModel="dataModel"
+      :utils="page.utils"
+      :data="component.data"
+      :propsValues="component.componentValue.props"
+      :dataValues="component.componentValue.data"
+      :eventValues="component.componentValue.event"
+      :useDataSource="page.useDataSource"
+      :style="component.getComponentStyles()"
+      :class="[component.uId]"
+
+    />
+  </template>
+</template>
+
+<style>
+
+</style>