init

2024-03-04 19:13:43 +08:00
commit e44edd71c0
350 changed files with 52288 additions and 0 deletions
--- a/src/views/workflow/form/FormDesign.vue
+++ b/src/views/workflow/form/FormDesign.vue
@@ -0,0 +1,596 @@
+<template>
+  <div class="form-design">
+    <!--左侧组件库-->
+    <div style="width: 350px">
+      <div class="components-nav">
+        <span @click="libSelect = 0">组件库</span>
+      </div>
+      <div style="overflow-y: auto;height:calc(100vh - 172px);">
+        <div class="components" v-for="(item, i) in baseComponents" :key="i">
+          <p>{{ item.name }}</p>
+          <ul>
+            <draggable
+                class="drag"
+                :list="item.components"
+                :group="{ name: 'form', pull: 'clone', put: false }"
+                itemKey="name"
+                @start="isStart = true" @end="isStart = false" :clone="clone"
+            >
+              <template #item="{ element, index }">
+                <div class="list-group-item">
+                  <li :key="id">
+                    <el-icon>
+                      <component :is="element.icon"/>
+                    </el-icon>
+                    <span>{{ element.title }}</span>
+                  </li>
+                </div>
+              </template>
+            </draggable>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <!--中间编辑区-->
+    <div class="layout-main">
+      <div class="tool-nav">
+        <div>
+          <el-tooltip class="item" effect="dark" content="撤销" placement="bottom-start">
+            <el-icon>
+              <RefreshLeft/>
+            </el-icon>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="恢复" placement="bottom-start">
+            <el-icon>
+              <RefreshRight/>
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <div>
+          <el-tooltip class="item" effect="dark" content="预览表单" placement="bottom-start">
+            <el-icon @click="viewForms">
+              <View/>
+            </el-icon>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="移动端" placement="bottom-start">
+            <el-icon :class="{'select': showMobile}" @click="showMobile = true">
+              <Cellphone/>
+            </el-icon>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="PC端" placement="bottom-start">
+            <el-icon :class="{'select': !showMobile}" @click="showMobile = false">
+              <Monitor/>
+            </el-icon>
+          </el-tooltip>
+        </div>
+      </div>
+      <div class="work-form">
+        <div :class="{'mobile': showMobile, 'pc': !showMobile}">
+          <div :class="{'bd': showMobile}">
+            <div :class="{'form-content': showMobile}">
+              <div class="form">
+                <div class="tip" v-show="formItems.length === 0 && !isStart">👈 请在左侧选择控件并拖至此处</div>
+                <draggable class="drag-from" :list="formItems" group="form"
+                           :options="{animation: 300, chosenClass:'choose', sort:true}"
+                           @start="drag = true; selectFormItem = null" @end="drag = false">
+                  <template #item="{ element, index }">
+                    <div class="form-item" @click="selectItem(element)"
+                         :style="getSelectedClass(element)">
+                      <div class="form-header">
+                        <p><span v-if="element.props.required">*</span>{{ element.title }}</p>
+                        <div class="option">
+                          <!--<i class="el-icon-copy-document" @click="copy"></i>-->
+                          <!--                          <el-icon  @click="copy">-->
+                          <!--                            <CopyDocument/>-->
+                          <!--                          </el-icon>-->
+                          <el-icon size="25px" @click="delItem(index)">
+                            <Close/>
+                          </el-icon>
+                        </div>
+                        <form-design-render :config="element"/>
+                      </div>
+                    </div>
+                  </template>
+                </draggable>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="layout-param" v-if="isShow">
+      <div class="tool-nav-r" v-if="selectFormItem">
+        <i :class="selectFormItem.icon" style="margin-right: 5px; font-size: medium"></i>
+        <span>{{ selectFormItem.title }}</span>
+      </div>
+      <div v-if="!selectFormItem || forms.length === 0" class="tip">
+        😀 选中控件后在这里进行编辑
+      </div>
+      <div style="text-align:left; padding: 10px" v-else>
+        <form-component-config/>
+      </div>
+    </div>
+  </div>
+
+  <el-dialog v-model="viewFormVisible" title="表单预览" width="800px">
+    <el-radio-group v-model="formPreviewModel" @change="formPreviewModelChange">
+      <el-radio-button label="E">编辑</el-radio-button>
+      <el-radio-button label="R">查看</el-radio-button>
+    </el-radio-group>
+    <form-render v-if="viewFormVisibleRender" ref="form" :form-items="forms" v-model:value="formValue"
+                 :is-preview="true" :mode="formPreviewModel"/>
+  </el-dialog>
+</template>
+
+<script setup>
+import draggable from 'vuedraggable';
+import FormRender from './FormRender.vue'
+import FormDesignRender from './FormDesignRender.vue'
+import FormComponentConfig from './FormComponentConfig.vue'
+import {ValueType} from "./ComponentsConfigExport";
+import {CopyDocument, Close} from '@element-plus/icons-vue'
+import {ref, computed, defineExpose} from 'vue'
+import {baseComponents} from './ComponentsConfigExport'
+import {ElMessage, ElMessageBox} from "element-plus";
+import {useProcessStore} from '@/stores/processStore.js'
+
+const processStore = useProcessStore()
+
+const form = ref()
+const isStart = ref(false)
+const isShow = ref(true)
+const showMobile = ref(false)
+const formValue = ref({})
+const formPreviewModel = ref("E")
+const viewFormVisible = ref(false)
+const viewFormVisibleRender = ref(true)
+const forms = ref(processStore.getDesign().formItems)
+const formItems = computed(() => {
+  return processStore.getDesign().formItems
+})
+const selectFormItem = computed({
+  get() {
+    return processStore.getSelectedFormItem()
+  },
+  set(val) {
+    processStore.setSelectedFormItem(val)
+  },
+})
+
+const clone = (obj) => {
+  obj.id = getId()
+  return JSON.parse(JSON.stringify(obj));
+}
+// const copy = (node, index) => {
+//   console.log(node)
+//   processStore.getDesign().formItems.push(index + 1, 0,{...node})
+// }
+
+const formPreviewModelChange = () => {
+  // 卸载
+  // viewFormVisibleRender.value= false
+  // nextTick(()=>{
+  //   // 加载
+  //   viewFormVisibleRender.value= true
+  // })
+}
+const delItem = (index) => {
+  ElMessageBox.confirm('删除组件将会连带删除包含该组件的条件以及相关设置，是否继续?', '提示', {
+    confirmButtonText: '确 定',
+    cancelButtonText: '取 消',
+    type: 'warning'
+  }).then(() => {
+    if (processStore.getDesign().formItems[index].name === 'SpanLayout') {
+      //删除的是分栏则遍历删除分栏内所有子组件
+      processStore.getDesign().formItems[index].props.items.forEach(item => {
+        removeFormItemAbout(item)
+      })
+      processStore.getDesign().formItems[index].props.items.length = 0
+    } else {
+      removeFormItemAbout(processStore.getDesign().formItems[index])
+    }
+    processStore.getDesign().formItems.splice(index, 1)
+  })
+}
+
+const viewForms = () => {
+  viewFormVisible.value = true
+  formValue.value = {}
+}
+
+const removeFormItemAbout = async (item) => {
+  processStore.nodeMap.forEach(node => {
+    //搜寻条件，进行移除
+    if (node.type === 'CONDITION') {
+      node.props.groups.forEach(group => {
+        let i = group.cids.remove(item.id)
+        if (i > -1) {
+          //从子条件移除
+          group.conditions.splice(i, 1)
+        }
+      })
+    }
+    //搜寻权限，进行移除
+    if (node.type === 'ROOT' || node.type === 'APPROVAL' || node.type === 'CC') {
+      node.props.formPerms.removeByKey('id', item.id)
+      if (node.props.formUser === item.id) {
+        node.props.formUser = ''
+      }
+    }
+  })
+}
+
+const getId = () => {
+  return 'field' + (Math.floor(Math.random() * (99999 - 10000)) + 10000).toString()
+      + new Date().getTime().toString().substring(5);
+}
+const getSelectedClass = (element) => {
+  return processStore.getSelectedFormItem() && processStore.getSelectedFormItem().id === element.id ?
+      'border-left: 4px solid #409eff' : ''
+}
+
+const selectItem = (element) => {
+  isShow.value = false
+  selectFormItem.value = element
+  nextTick(() => {
+    isShow.value = true
+  })
+}
+
+
+const validateItem = (err, titleSet, item) => {
+  if (titleSet.has(item.title) && item.name !== 'SpanLayout') {
+    err.push(`表单 ${item.title} 名称重复`)
+  }
+  titleSet.add(item.title)
+  if (item.name === 'SelectInput' || item.name === 'MultipleSelect') {
+    if (item.props.options.length === 0) {
+      err.push(`${item.title} 未设置选项`)
+    }
+  } else if (item.name === 'TableList') {
+    if (item.props.columns.length === 0) {
+      err.push(`明细表 ${item.title} 内未添加组件`)
+    }
+  } else if (item.name === 'SpanLayout') {
+    if (item.props.items.length === 0) {
+      err.push('分栏内未添加组件')
+    } else {
+      item.props.items.forEach(sub => validateItem(err, titleSet, sub))
+    }
+  }
+}
+
+const validate = () => {
+  let err = []
+  if (processStore.getDesign().formItems.length > 0) {
+    let titleSet = new Set()
+    processStore.getDesign().formItems.forEach(item => {
+      //主要校验表格及分栏/选择器/表单名称/是否设置
+      validateItem(err, titleSet, item)
+    })
+  } else {
+    err.push('表单为空，请添加组件')
+  }
+  return err
+}
+
+
+defineExpose({
+  validate
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+.form-design {
+  display: flex;
+
+}
+
+.choose {
+  border: 1px dashed #1890FF !important;
+}
+
+.process-form {
+  //.el-form-item__label {
+  //  padding: 0 0;
+  //}
+}
+
+.components-nav {
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  margin: 12px 12px 0;
+  height: 28px;
+  box-shadow: 0 2px 4px 0 rgba(17, 31, 44, 0.04);
+  border: 1px solid #ecedef;
+  border-radius: 16px;
+  background-color: #fff;
+
+  .selected {
+    color: #1890FF;
+  }
+
+  .border {
+    border-left: 1px solid #f5f6f6;
+    border-right: 1px solid #f5f6f6;
+  }
+
+  span {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: 12px;
+    color: rgba(17, 31, 44, 0.72);
+    cursor: pointer;
+
+    &:hover {
+      color: #1890FF;
+    }
+  }
+}
+
+.components {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  //margin-top: 20px;
+  //padding: 0 20px;
+  font-size: 12px;
+  width: 100%;
+  color: rgba(17, 31, 44, 0.85);
+
+  & > p {
+    padding: 0 20px;
+  }
+
+  .drag {
+    margin-left: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    li {
+      text-align: center;
+      display: flex;
+      align-items: center;
+      width: 124px;
+      height: 38px;
+      margin-bottom: 12px;
+      border: 1px solid transparent;
+      border-radius: 8px;
+      cursor: grab;
+      background-color: #fff;
+
+      &:hover {
+        border: 1px solid #1890FF;
+        color: #1890FF;
+      }
+
+      i {
+        margin: 0 12px;
+      }
+    }
+
+    li:nth-child(odd) {
+      margin-right: 8px;
+    }
+  }
+}
+
+.layout-main {
+  width: 80%;
+  background-color: #feffff;
+
+  .tool-nav {
+    font-size: medium;
+    padding: 8px 20px;
+    background: #fafafb;
+    border-bottom: 1px solid #ebecee;
+
+    div:first-child {
+      display: inline-block;
+      text-align: left;
+
+      i {
+        margin-right: 10px
+      }
+    }
+
+    div:last-child {
+      float: right;
+
+      i {
+        margin-left: 10px
+      }
+    }
+
+    i {
+      color: #7a7a7a;
+      cursor: pointer;
+
+      &:hover {
+        color: #4b4b4b;
+      }
+    }
+  }
+
+  .work-form {
+    margin: 0 auto;
+    //height: calc(100% - 38px);
+    overflow-y: auto;
+    background: rgb(245, 246, 246);
+    border-left: 1px solid rgb(235, 236, 238);
+    border-right: 1px solid rgb(235, 236, 238);
+    margin-right: -1px;
+
+    .pc {
+      margin-top: 4%;
+      padding: 0 150px;
+
+      .drag-from {
+        height: calc(100vh - 190px);
+        background-color: rgb(245, 246, 246);
+
+        .form-item, li {
+          cursor: grab;
+          background: #ffffff;
+          padding: 10px;
+          border: 1px solid #ebecee;
+          margin: 5px 0;
+        }
+      }
+    }
+
+    .mobile {
+      margin-left: auto;
+      margin-right: auto;
+      width: 360px;
+      max-height: 640px;
+      margin-top: 4%;
+      border-radius: 24px;
+      box-shadow: 0 8px 40px 0 rgba(17, 31, 44, 0.12);
+
+      .bd {
+        border: 1px solid rgba(17, 31, 44, 0.08);
+        border-radius: 24px;
+        padding: 10px 10px;
+        background-color: #ffffff;
+
+        .form-content {
+          padding: 3px 2px;
+          border-radius: 14px;
+          background-color: #f2f4f5;
+
+          .drag-from {
+            width: 100%;
+            height: calc(100vh - 190px);
+            min-height: 200px;
+            max-height: 600px;
+          }
+
+          .form {
+            overflow-y: auto;
+            width: 100%;
+            display: inline-block;
+            max-height: 640px;
+
+            .form-item, li {
+              border: 1px solid #ffffff;
+              list-style: none;
+              background: #ffffff;
+              padding: 10px;
+              margin: 5px 0;
+              cursor: grab;
+            }
+          }
+        }
+      }
+    }
+
+    .tip {
+      //float: left;
+      margin: 0 auto;
+      width: 65%;
+      max-width: 400px;
+      padding: 35px 20px;
+      border-radius: 10px;
+      border: 1px dashed rgba(25, 31, 37, 0.12);
+      margin-top: 50px;
+      text-align: center;
+      font-size: 14px;
+      color: rgb(122, 122, 122);
+      z-index: 9999;
+
+      &:hover {
+        border: 1px dashed #1890FF;
+      }
+    }
+  }
+
+}
+
+.layout-param {
+  width: 300px;
+  text-align: center;
+  font-size: 14px;
+  color: rgb(122, 122, 122);
+
+  .tool-nav-r {
+    text-align: left;
+    font-size: small;
+    border-left: 1px solid #ebecee;
+    padding: 8px 20px;
+    background: #fafafb;
+    border-bottom: 1px solid #ebecee;
+  }
+
+  .tip {
+    margin-top: 150px;
+  }
+}
+
+.flip-list-move {
+  transition: transform 0.5s;
+}
+
+.no-move {
+  transition: transform 0s;
+}
+
+.select {
+  color: #4b4b4b !important;
+}
+
+.form-header {
+  font-size: small;
+  color: #818181;
+  text-align: left;
+  position: relative;
+  background-color: #fff;
+
+  p {
+    position: relative;
+    margin: 0 0 10px 0;
+
+    span {
+      position: absolute;
+      left: -8px;
+      top: 3px;
+      color: rgb(217, 0, 19);
+    }
+  }
+
+  .option {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+
+    i {
+      font-size: large;
+      cursor: pointer;
+      color: #8c8c8c;
+      padding: 5px;
+
+      &:hover {
+        color: #f56c6c;
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  background-color: #f8f8f8;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 16px;
+  background-color: #e8e8e8;
+}
+</style>