BPM:支持多表单,每个流程任务都可以绑定流程表单
							parent
							
								
									501a1c2f4d
								
							
						
					
					
						commit
						08dd4ed072
					
				|  | @ -24,12 +24,7 @@ | |||
|       </el-collapse-item> | ||||
|       <el-collapse-item name="condition" v-if="formVisible" key="form"> | ||||
|         <template #title><Icon icon="ep:list" />表单</template> | ||||
|         <!-- <element-form :id="elementId" :type="elementType" /> --> | ||||
|         友情提示:使用 | ||||
|         <router-link :to="{ path: '/bpm/manager/form' }" | ||||
|           ><el-link type="danger">流程表单</el-link> | ||||
|         </router-link> | ||||
|         替代,提供更好的表单设计功能 | ||||
|         <element-form :id="elementId" :type="elementType" /> | ||||
|       </el-collapse-item> | ||||
|       <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task"> | ||||
|         <template #title><Icon icon="ep:checked" />任务(审批人)</template> | ||||
|  |  | |||
|  | @ -1,228 +1,233 @@ | |||
| <template> | ||||
|   <div class="panel-tab__content"> | ||||
|     <el-form label-width="80px"> | ||||
|       <el-form-item label="表单标识"> | ||||
|         <el-input v-model="formKey" clearable @change="updateElementFormKey" /> | ||||
|       </el-form-item> | ||||
|       <el-form-item label="业务标识"> | ||||
|         <el-select v-model="businessKey" @change="updateElementBusinessKey"> | ||||
|           <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" /> | ||||
|           <el-option label="无" value="" /> | ||||
|       <el-form-item label="流程表单"> | ||||
|         <!--        <el-input v-model="formKey" clearable @change="updateElementFormKey" />--> | ||||
|         <el-select v-model="formKey" clearable @change="updateElementFormKey"> | ||||
|           <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" /> | ||||
|         </el-select> | ||||
|       </el-form-item> | ||||
|       <!--      <el-form-item label="业务标识">--> | ||||
|       <!--        <el-select v-model="businessKey" @change="updateElementBusinessKey">--> | ||||
|       <!--          <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />--> | ||||
|       <!--          <el-option label="无" value="" />--> | ||||
|       <!--        </el-select>--> | ||||
|       <!--      </el-form-item>--> | ||||
|     </el-form> | ||||
| 
 | ||||
|     <!--字段列表--> | ||||
|     <div class="element-property list-property"> | ||||
|       <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider> | ||||
|       <el-table :data="fieldList" max-height="240" fit border> | ||||
|         <el-table-column label="序号" type="index" width="50px" /> | ||||
|         <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip /> | ||||
|         <el-table-column | ||||
|           label="字段类型" | ||||
|           prop="type" | ||||
|           min-width="80px" | ||||
|           :formatter="(row) => fieldType[row.type] || row.type" | ||||
|           show-overflow-tooltip | ||||
|         /> | ||||
|         <el-table-column | ||||
|           label="默认值" | ||||
|           prop="defaultValue" | ||||
|           min-width="80px" | ||||
|           show-overflow-tooltip | ||||
|         /> | ||||
|         <el-table-column label="操作" width="90px"> | ||||
|           <template #default="scope"> | ||||
|             <el-button type="primary" link @click="openFieldForm(scope, scope.$index)" | ||||
|               >编辑</el-button | ||||
|             > | ||||
|             <el-divider direction="vertical" /> | ||||
|             <el-button | ||||
|               type="primary" | ||||
|               link | ||||
|               style="color: #ff4d4f" | ||||
|               @click="removeField(scope, scope.$index)" | ||||
|               >移除</el-button | ||||
|             > | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|       </el-table> | ||||
|     </div> | ||||
|     <div class="element-drawer__button"> | ||||
|       <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" /> | ||||
|     </div> | ||||
|     <!--    <div class="element-property list-property">--> | ||||
|     <!--      <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>--> | ||||
|     <!--      <el-table :data="fieldList" max-height="240" fit border>--> | ||||
|     <!--        <el-table-column label="序号" type="index" width="50px" />--> | ||||
|     <!--        <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />--> | ||||
|     <!--        <el-table-column--> | ||||
|     <!--          label="字段类型"--> | ||||
|     <!--          prop="type"--> | ||||
|     <!--          min-width="80px"--> | ||||
|     <!--          :formatter="(row) => fieldType[row.type] || row.type"--> | ||||
|     <!--          show-overflow-tooltip--> | ||||
|     <!--        />--> | ||||
|     <!--        <el-table-column--> | ||||
|     <!--          label="默认值"--> | ||||
|     <!--          prop="defaultValue"--> | ||||
|     <!--          min-width="80px"--> | ||||
|     <!--          show-overflow-tooltip--> | ||||
|     <!--        />--> | ||||
|     <!--        <el-table-column label="操作" width="90px">--> | ||||
|     <!--          <template #default="scope">--> | ||||
|     <!--            <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"--> | ||||
|     <!--              >编辑</el-button--> | ||||
|     <!--            >--> | ||||
|     <!--            <el-divider direction="vertical" />--> | ||||
|     <!--            <el-button--> | ||||
|     <!--              type="primary"--> | ||||
|     <!--              link--> | ||||
|     <!--              style="color: #ff4d4f"--> | ||||
|     <!--              @click="removeField(scope, scope.$index)"--> | ||||
|     <!--              >移除</el-button--> | ||||
|     <!--            >--> | ||||
|     <!--          </template>--> | ||||
|     <!--        </el-table-column>--> | ||||
|     <!--      </el-table>--> | ||||
|     <!--    </div>--> | ||||
|     <!--    <div class="element-drawer__button">--> | ||||
|     <!--      <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />--> | ||||
|     <!--    </div>--> | ||||
| 
 | ||||
|     <!--字段配置侧边栏--> | ||||
|     <el-drawer | ||||
|       v-model="fieldModelVisible" | ||||
|       title="字段配置" | ||||
|       :size="`${width}px`" | ||||
|       append-to-body | ||||
|       destroy-on-close | ||||
|     > | ||||
|       <el-form :model="formFieldForm" label-width="90px"> | ||||
|         <el-form-item label="字段ID"> | ||||
|           <el-input v-model="formFieldForm.id" clearable /> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="类型"> | ||||
|           <el-select | ||||
|             v-model="formFieldForm.typeType" | ||||
|             placeholder="请选择字段类型" | ||||
|             clearable | ||||
|             @change="changeFieldTypeType" | ||||
|           > | ||||
|             <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" /> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'"> | ||||
|           <el-input v-model="formFieldForm.type" clearable /> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="名称"> | ||||
|           <el-input v-model="formFieldForm.label" clearable /> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'"> | ||||
|           <el-input v-model="formFieldForm.datePattern" clearable /> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="默认值"> | ||||
|           <el-input v-model="formFieldForm.defaultValue" clearable /> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|     <!--    <el-drawer--> | ||||
|     <!--      v-model="fieldModelVisible"--> | ||||
|     <!--      title="字段配置"--> | ||||
|     <!--      :size="`${width}px`"--> | ||||
|     <!--      append-to-body--> | ||||
|     <!--      destroy-on-close--> | ||||
|     <!--    >--> | ||||
|     <!--      <el-form :model="formFieldForm" label-width="90px">--> | ||||
|     <!--        <el-form-item label="字段ID">--> | ||||
|     <!--          <el-input v-model="formFieldForm.id" clearable />--> | ||||
|     <!--        </el-form-item>--> | ||||
|     <!--        <el-form-item label="类型">--> | ||||
|     <!--          <el-select--> | ||||
|     <!--            v-model="formFieldForm.typeType"--> | ||||
|     <!--            placeholder="请选择字段类型"--> | ||||
|     <!--            clearable--> | ||||
|     <!--            @change="changeFieldTypeType"--> | ||||
|     <!--          >--> | ||||
|     <!--            <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />--> | ||||
|     <!--          </el-select>--> | ||||
|     <!--        </el-form-item>--> | ||||
|     <!--        <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">--> | ||||
|     <!--          <el-input v-model="formFieldForm.type" clearable />--> | ||||
|     <!--        </el-form-item>--> | ||||
|     <!--        <el-form-item label="名称">--> | ||||
|     <!--          <el-input v-model="formFieldForm.label" clearable />--> | ||||
|     <!--        </el-form-item>--> | ||||
|     <!--        <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">--> | ||||
|     <!--          <el-input v-model="formFieldForm.datePattern" clearable />--> | ||||
|     <!--        </el-form-item>--> | ||||
|     <!--        <el-form-item label="默认值">--> | ||||
|     <!--          <el-input v-model="formFieldForm.defaultValue" clearable />--> | ||||
|     <!--        </el-form-item>--> | ||||
|     <!--      </el-form>--> | ||||
| 
 | ||||
|       <!-- 枚举值设置 --> | ||||
|       <template v-if="formFieldForm.type === 'enum'"> | ||||
|         <el-divider key="enum-divider" /> | ||||
|         <p class="listener-filed__title" key="enum-title"> | ||||
|           <span><Icon icon="ep:menu" />枚举值列表:</span> | ||||
|           <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')" | ||||
|             >添加枚举值</el-button | ||||
|           > | ||||
|         </p> | ||||
|         <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border> | ||||
|           <el-table-column label="序号" width="50px" type="index" /> | ||||
|           <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip /> | ||||
|           <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip /> | ||||
|           <el-table-column label="操作" width="90px"> | ||||
|             <template #default="scope"> | ||||
|               <el-button | ||||
|                 type="primary" | ||||
|                 link | ||||
|                 @click="openFieldOptionForm(scope, scope.$index, 'enum')" | ||||
|                 >编辑</el-button | ||||
|               > | ||||
|               <el-divider direction="vertical" /> | ||||
|               <el-button | ||||
|                 type="primary" | ||||
|                 link | ||||
|                 style="color: #ff4d4f" | ||||
|                 @click="removeFieldOptionItem(scope, scope.$index, 'enum')" | ||||
|                 >移除</el-button | ||||
|               > | ||||
|             </template> | ||||
|           </el-table-column> | ||||
|         </el-table> | ||||
|       </template> | ||||
|     <!--      <!– 枚举值设置 –>--> | ||||
|     <!--      <template v-if="formFieldForm.type === 'enum'">--> | ||||
|     <!--        <el-divider key="enum-divider" />--> | ||||
|     <!--        <p class="listener-filed__title" key="enum-title">--> | ||||
|     <!--          <span><Icon icon="ep:menu" />枚举值列表:</span>--> | ||||
|     <!--          <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"--> | ||||
|     <!--            >添加枚举值</el-button--> | ||||
|     <!--          >--> | ||||
|     <!--        </p>--> | ||||
|     <!--        <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>--> | ||||
|     <!--          <el-table-column label="序号" width="50px" type="index" />--> | ||||
|     <!--          <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />--> | ||||
|     <!--          <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />--> | ||||
|     <!--          <el-table-column label="操作" width="90px">--> | ||||
|     <!--            <template #default="scope">--> | ||||
|     <!--              <el-button--> | ||||
|     <!--                type="primary"--> | ||||
|     <!--                link--> | ||||
|     <!--                @click="openFieldOptionForm(scope, scope.$index, 'enum')"--> | ||||
|     <!--                >编辑</el-button--> | ||||
|     <!--              >--> | ||||
|     <!--              <el-divider direction="vertical" />--> | ||||
|     <!--              <el-button--> | ||||
|     <!--                type="primary"--> | ||||
|     <!--                link--> | ||||
|     <!--                style="color: #ff4d4f"--> | ||||
|     <!--                @click="removeFieldOptionItem(scope, scope.$index, 'enum')"--> | ||||
|     <!--                >移除</el-button--> | ||||
|     <!--              >--> | ||||
|     <!--            </template>--> | ||||
|     <!--          </el-table-column>--> | ||||
|     <!--        </el-table>--> | ||||
|     <!--      </template>--> | ||||
| 
 | ||||
|       <!-- 校验规则 --> | ||||
|       <el-divider key="validation-divider" /> | ||||
|       <p class="listener-filed__title" key="validation-title"> | ||||
|         <span><Icon icon="ep:menu" />约束条件列表:</span> | ||||
|         <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')" | ||||
|           >添加约束</el-button | ||||
|         > | ||||
|       </p> | ||||
|       <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border> | ||||
|         <el-table-column label="序号" width="50px" type="index" /> | ||||
|         <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip /> | ||||
|         <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip /> | ||||
|         <el-table-column label="操作" width="90px"> | ||||
|           <template #default="scope"> | ||||
|             <el-button | ||||
|               type="primary" | ||||
|               link | ||||
|               @click="openFieldOptionForm(scope, scope.$index, 'constraint')" | ||||
|               >编辑</el-button | ||||
|             > | ||||
|             <el-divider direction="vertical" /> | ||||
|             <el-button | ||||
|               type="primary" | ||||
|               link | ||||
|               style="color: #ff4d4f" | ||||
|               @click="removeFieldOptionItem(scope, scope.$index, 'constraint')" | ||||
|               >移除</el-button | ||||
|             > | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|       </el-table> | ||||
|     <!--      <!– 校验规则 –>--> | ||||
|     <!--      <el-divider key="validation-divider" />--> | ||||
|     <!--      <p class="listener-filed__title" key="validation-title">--> | ||||
|     <!--        <span><Icon icon="ep:menu" />约束条件列表:</span>--> | ||||
|     <!--        <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"--> | ||||
|     <!--          >添加约束</el-button--> | ||||
|     <!--        >--> | ||||
|     <!--      </p>--> | ||||
|     <!--      <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>--> | ||||
|     <!--        <el-table-column label="序号" width="50px" type="index" />--> | ||||
|     <!--        <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />--> | ||||
|     <!--        <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />--> | ||||
|     <!--        <el-table-column label="操作" width="90px">--> | ||||
|     <!--          <template #default="scope">--> | ||||
|     <!--            <el-button--> | ||||
|     <!--              type="primary"--> | ||||
|     <!--              link--> | ||||
|     <!--              @click="openFieldOptionForm(scope, scope.$index, 'constraint')"--> | ||||
|     <!--              >编辑</el-button--> | ||||
|     <!--            >--> | ||||
|     <!--            <el-divider direction="vertical" />--> | ||||
|     <!--            <el-button--> | ||||
|     <!--              type="primary"--> | ||||
|     <!--              link--> | ||||
|     <!--              style="color: #ff4d4f"--> | ||||
|     <!--              @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"--> | ||||
|     <!--              >移除</el-button--> | ||||
|     <!--            >--> | ||||
|     <!--          </template>--> | ||||
|     <!--        </el-table-column>--> | ||||
|     <!--      </el-table>--> | ||||
| 
 | ||||
|       <!-- 表单属性 --> | ||||
|       <el-divider key="property-divider" /> | ||||
|       <p class="listener-filed__title" key="property-title"> | ||||
|         <span><Icon icon="ep:menu" />字段属性列表:</span> | ||||
|         <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')" | ||||
|           >添加属性</el-button | ||||
|         > | ||||
|       </p> | ||||
|       <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border> | ||||
|         <el-table-column label="序号" width="50px" type="index" /> | ||||
|         <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip /> | ||||
|         <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip /> | ||||
|         <el-table-column label="操作" width="90px"> | ||||
|           <template #default="scope"> | ||||
|             <el-button | ||||
|               type="primary" | ||||
|               link | ||||
|               @click="openFieldOptionForm(scope, scope.$index, 'property')" | ||||
|               >编辑</el-button | ||||
|             > | ||||
|             <el-divider direction="vertical" /> | ||||
|             <el-button | ||||
|               type="primary" | ||||
|               link | ||||
|               style="color: #ff4d4f" | ||||
|               @click="removeFieldOptionItem(scope, scope.$index, 'property')" | ||||
|               >移除</el-button | ||||
|             > | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|       </el-table> | ||||
|     <!--      <!– 表单属性 –>--> | ||||
|     <!--      <el-divider key="property-divider" />--> | ||||
|     <!--      <p class="listener-filed__title" key="property-title">--> | ||||
|     <!--        <span><Icon icon="ep:menu" />字段属性列表:</span>--> | ||||
|     <!--        <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"--> | ||||
|     <!--          >添加属性</el-button--> | ||||
|     <!--        >--> | ||||
|     <!--      </p>--> | ||||
|     <!--      <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>--> | ||||
|     <!--        <el-table-column label="序号" width="50px" type="index" />--> | ||||
|     <!--        <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />--> | ||||
|     <!--        <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />--> | ||||
|     <!--        <el-table-column label="操作" width="90px">--> | ||||
|     <!--          <template #default="scope">--> | ||||
|     <!--            <el-button--> | ||||
|     <!--              type="primary"--> | ||||
|     <!--              link--> | ||||
|     <!--              @click="openFieldOptionForm(scope, scope.$index, 'property')"--> | ||||
|     <!--              >编辑</el-button--> | ||||
|     <!--            >--> | ||||
|     <!--            <el-divider direction="vertical" />--> | ||||
|     <!--            <el-button--> | ||||
|     <!--              type="primary"--> | ||||
|     <!--              link--> | ||||
|     <!--              style="color: #ff4d4f"--> | ||||
|     <!--              @click="removeFieldOptionItem(scope, scope.$index, 'property')"--> | ||||
|     <!--              >移除</el-button--> | ||||
|     <!--            >--> | ||||
|     <!--          </template>--> | ||||
|     <!--        </el-table-column>--> | ||||
|     <!--      </el-table>--> | ||||
| 
 | ||||
|       <!-- 底部按钮 --> | ||||
|       <div class="element-drawer__button"> | ||||
|         <el-button>取 消</el-button> | ||||
|         <el-button type="primary" @click="saveField">保 存</el-button> | ||||
|       </div> | ||||
|     </el-drawer> | ||||
|     <!--      <!– 底部按钮 –>--> | ||||
|     <!--      <div class="element-drawer__button">--> | ||||
|     <!--        <el-button>取 消</el-button>--> | ||||
|     <!--        <el-button type="primary" @click="saveField">保 存</el-button>--> | ||||
|     <!--      </div>--> | ||||
|     <!--    </el-drawer>--> | ||||
| 
 | ||||
|     <el-dialog | ||||
|       v-model="fieldOptionModelVisible" | ||||
|       :title="optionModelTitle" | ||||
|       width="600px" | ||||
|       append-to-body | ||||
|       destroy-on-close | ||||
|     > | ||||
|       <el-form :model="fieldOptionForm" label-width="96px"> | ||||
|         <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id"> | ||||
|           <el-input v-model="fieldOptionForm.id" clearable /> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name"> | ||||
|           <el-input v-model="fieldOptionForm.name" clearable /> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config"> | ||||
|           <el-input v-model="fieldOptionForm.config" clearable /> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value"> | ||||
|           <el-input v-model="fieldOptionForm.value" clearable /> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|       <template #footer> | ||||
|         <el-button @click="fieldOptionModelVisible = false">取 消</el-button> | ||||
|         <el-button type="primary" @click="saveFieldOption">确 定</el-button> | ||||
|       </template> | ||||
|     </el-dialog> | ||||
|     <!--    <el-dialog--> | ||||
|     <!--      v-model="fieldOptionModelVisible"--> | ||||
|     <!--      :title="optionModelTitle"--> | ||||
|     <!--      width="600px"--> | ||||
|     <!--      append-to-body--> | ||||
|     <!--      destroy-on-close--> | ||||
|     <!--    >--> | ||||
|     <!--      <el-form :model="fieldOptionForm" label-width="96px">--> | ||||
|     <!--        <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">--> | ||||
|     <!--          <el-input v-model="fieldOptionForm.id" clearable />--> | ||||
|     <!--        </el-form-item>--> | ||||
|     <!--        <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">--> | ||||
|     <!--          <el-input v-model="fieldOptionForm.name" clearable />--> | ||||
|     <!--        </el-form-item>--> | ||||
|     <!--        <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">--> | ||||
|     <!--          <el-input v-model="fieldOptionForm.config" clearable />--> | ||||
|     <!--        </el-form-item>--> | ||||
|     <!--        <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">--> | ||||
|     <!--          <el-input v-model="fieldOptionForm.value" clearable />--> | ||||
|     <!--        </el-form-item>--> | ||||
|     <!--      </el-form>--> | ||||
|     <!--      <template #footer>--> | ||||
|     <!--        <el-button @click="fieldOptionModelVisible = false">取 消</el-button>--> | ||||
|     <!--        <el-button type="primary" @click="saveFieldOption">确 定</el-button>--> | ||||
|     <!--      </template>--> | ||||
|     <!--    </el-dialog>--> | ||||
|   </div> | ||||
| </template> | ||||
| 
 | ||||
| <script lang="ts" setup> | ||||
| import * as FormApi from '@/api/bpm/form' | ||||
| 
 | ||||
| defineOptions({ name: 'ElementForm' }) | ||||
| 
 | ||||
| const props = defineProps({ | ||||
|  | @ -263,6 +268,9 @@ const bpmnInstances = () => (window as any)?.bpmnInstances | |||
| const resetFormList = () => { | ||||
|   bpmnELement.value = bpmnInstances().bpmnElement | ||||
|   formKey.value = bpmnELement.value.businessObject.formKey | ||||
|   if (formKey.value?.length > 0) { | ||||
|     formKey.value = parseInt(formKey.value) | ||||
|   } | ||||
|   // 获取元素扩展属性 或者 创建扩展属性 | ||||
|   elExtensionElements.value = | ||||
|     bpmnELement.value.businessObject.get('extensionElements') || | ||||
|  | @ -451,6 +459,11 @@ const updateElementExtensions = () => { | |||
|   }) | ||||
| } | ||||
| 
 | ||||
| const formList = ref([]) // 流程表单的下拉框的数据 | ||||
| onMounted(async () => { | ||||
|   formList.value = await FormApi.getSimpleFormList() | ||||
| }) | ||||
| 
 | ||||
| watch( | ||||
|   () => props.id, | ||||
|   (val) => { | ||||
|  |  | |||
|  | @ -28,7 +28,7 @@ export const decodeFields = (fields: string[]) => { | |||
|   return rule | ||||
| } | ||||
| 
 | ||||
| // 设置表单的 Conf 和 Fields
 | ||||
| // 设置表单的 Conf 和 Fields,适用 FcDesigner 场景
 | ||||
| export const setConfAndFields = (designerRef: object, conf: string, fields: string) => { | ||||
|   // @ts-ignore
 | ||||
|   designerRef.value.setOption(JSON.parse(conf)) | ||||
|  | @ -36,19 +36,22 @@ export const setConfAndFields = (designerRef: object, conf: string, fields: stri | |||
|   designerRef.value.setRule(decodeFields(fields)) | ||||
| } | ||||
| 
 | ||||
| // 设置表单的 Conf 和 Fields
 | ||||
| // 设置表单的 Conf 和 Fields,适用 form-create 场景
 | ||||
| export const setConfAndFields2 = ( | ||||
|   detailPreview: object, | ||||
|   conf: string, | ||||
|   fields: string, | ||||
|   value?: object | ||||
| ) => { | ||||
|   if (isRef(detailPreview)) { | ||||
|     detailPreview = detailPreview.value | ||||
|   } | ||||
|   // @ts-ignore
 | ||||
|   detailPreview.value.option = JSON.parse(conf) | ||||
|   detailPreview.option = JSON.parse(conf) | ||||
|   // @ts-ignore
 | ||||
|   detailPreview.value.rule = decodeFields(fields) | ||||
|   detailPreview.rule = decodeFields(fields) | ||||
|   if (value) { | ||||
|     // @ts-ignore
 | ||||
|     detailPreview.value.value = value | ||||
|     detailPreview.value = value | ||||
|   } | ||||
| } | ||||
|  |  | |||
|  | @ -194,11 +194,10 @@ const submitForm = async () => { | |||
|       await ModelApi.createModel(data) | ||||
|       // 提示,引导用户做后续的操作 | ||||
|       await ElMessageBox.alert( | ||||
|         '<strong>新建模型成功!</strong>后续需要执行如下 4 个步骤:' + | ||||
|         '<strong>新建模型成功!</strong>后续需要执行如下 3 个步骤:' + | ||||
|           '<div>1. 点击【修改流程】按钮,配置流程的分类、表单信息</div>' + | ||||
|           '<div>2. 点击【设计流程】按钮,绘制流程图</div>' + | ||||
|           '<div>3. 点击【分配规则】按钮,设置每个用户任务的审批人</div>' + | ||||
|           '<div>4. 点击【发布流程】按钮,完成流程的最终发布</div>' + | ||||
|           '<div>3. 点击【发布流程】按钮,完成流程的最终发布</div>' + | ||||
|           '另外,每次流程修改后,都需要点击【发布流程】按钮,才能正式生效!!!', | ||||
|         '重要提示', | ||||
|         { | ||||
|  |  | |||
|  | @ -21,9 +21,22 @@ | |||
|             {{ processInstance.name }} | ||||
|           </el-form-item> | ||||
|           <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人"> | ||||
|             {{ processInstance.startUser.nickname }} | ||||
|             <el-tag size="small" type="info">{{ processInstance.startUser.deptName }}</el-tag> | ||||
|             {{ processInstance?.startUser.nickname }} | ||||
|             <el-tag size="small" type="info">{{ processInstance?.startUser.deptName }}</el-tag> | ||||
|           </el-form-item> | ||||
|           <el-card class="mb-15px !-mt-10px" v-if="runningTasks[index].formId > 0"> | ||||
|             <template #header> | ||||
|               <span class="el-icon-picture-outline"> | ||||
|                 填写表单【{{ runningTasks[index]?.formName }}】 | ||||
|               </span> | ||||
|             </template> | ||||
|             <form-create | ||||
|               v-model:api="approveFormFApis[index]" | ||||
|               v-model="approveForms[index].value" | ||||
|               :option="approveForms[index].option" | ||||
|               :rule="approveForms[index].rule" | ||||
|             /> | ||||
|           </el-card> | ||||
|           <el-form-item label="审批建议" prop="reason"> | ||||
|             <el-input | ||||
|               v-model="auditForms[index].reason" | ||||
|  | @ -149,6 +162,9 @@ const auditForms = ref<any[]>([]) // 审批任务的表单 | |||
| const auditRule = reactive({ | ||||
|   reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }] | ||||
| }) | ||||
| const approveForms = ref<any[]>([]) // 审批通过时,额外的补充信息 | ||||
| const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi | ||||
| 
 | ||||
| // ========== 申请信息 ========== | ||||
| const fApi = ref<ApiAttrs>() // | ||||
| const detailForm = ref({ | ||||
|  | @ -158,6 +174,20 @@ const detailForm = ref({ | |||
|   value: {} | ||||
| }) | ||||
| 
 | ||||
| /** 监听 approveFormFApis,实现它对应的 form-create 初始化后,隐藏掉对应的表单提交按钮 */ | ||||
| watch( | ||||
|   () => approveFormFApis.value, | ||||
|   (value) => { | ||||
|     value?.forEach((api) => { | ||||
|       api.btn.show(false) | ||||
|       api.resetBtn.show(false) | ||||
|     }) | ||||
|   }, | ||||
|   { | ||||
|     deep: true | ||||
|   } | ||||
| ) | ||||
| 
 | ||||
| /** 处理审批通过和不通过的操作 */ | ||||
| const handleAudit = async (task, pass) => { | ||||
|   // 1.1 获得对应表单 | ||||
|  | @ -176,6 +206,12 @@ const handleAudit = async (task, pass) => { | |||
|     copyUserIds: auditForms.value[index].copyUserIds | ||||
|   } | ||||
|   if (pass) { | ||||
|     // 审批通过,并且有额外的 approveForm 表单,需要校验 + 拼接到 data 表单里提交 | ||||
|     const formCreateApi = approveFormFApis.value[index] | ||||
|     if (formCreateApi) { | ||||
|       await formCreateApi.validate() | ||||
|       data.variables = approveForms.value[index].value | ||||
|     } | ||||
|     await TaskApi.approveTask(data) | ||||
|     message.success('审批通过成功') | ||||
|   } else { | ||||
|  | @ -258,6 +294,10 @@ const getProcessInstance = async () => { | |||
| 
 | ||||
| /** 加载任务列表 */ | ||||
| const getTaskList = async () => { | ||||
|   runningTasks.value = [] | ||||
|   auditForms.value = [] | ||||
|   approveForms.value = [] | ||||
|   approveFormFApis.value = [] | ||||
|   try { | ||||
|     // 获得未取消的任务 | ||||
|     tasksLoad.value = true | ||||
|  | @ -285,8 +325,6 @@ const getTaskList = async () => { | |||
|     }) | ||||
| 
 | ||||
|     // 获得需要自己审批的任务 | ||||
|     runningTasks.value = [] | ||||
|     auditForms.value = [] | ||||
|     loadRunningTask(tasks.value) | ||||
|   } finally { | ||||
|     tasksLoad.value = false | ||||
|  | @ -315,6 +353,15 @@ const loadRunningTask = (tasks) => { | |||
|       reason: '', | ||||
|       copyUserIds: [] | ||||
|     }) | ||||
| 
 | ||||
|     // 2.4 处理 approve 表单 | ||||
|     if (task.formId && task.formConf) { | ||||
|       const approveForm = {} | ||||
|       setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable) | ||||
|       approveForms.value.push(approveForm) | ||||
|     } else { | ||||
|       approveForms.value.push({}) // 占位,避免为空 | ||||
|     } | ||||
|   }) | ||||
| } | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	 YunaiV
						YunaiV