|
@@ -1,165 +1,186 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="workflow-add container-height">
|
|
<div class="workflow-add container-height">
|
|
|
<Breadcrumb />
|
|
<Breadcrumb />
|
|
|
- <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-position="top" class="page-add">
|
|
|
|
|
- <div class="padding16 bg_color_fff border_radius_10 box_shadow_card" v-show="!isFullscreen">
|
|
|
|
|
- <div class="gap10">
|
|
|
|
|
- <div class="line_vertical"></div>
|
|
|
|
|
- <div class="font_size20 bold"><span class="color_required font_size16">*</span>{{$t('workflowTrade.fileUpload')}}</div>
|
|
|
|
|
- <div class="gray999 font_size14">{{$t('workflowTrade.supportFormat')}}:JSON、YAML、ZIP({{$t('common.maxSize')}}10MB)</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="mt10">
|
|
|
|
|
- <el-form-item label="" prop="workflowFile">
|
|
|
|
|
- <!-- 上传 -->
|
|
|
|
|
- <FileUploader
|
|
|
|
|
- ref="fileUploader"
|
|
|
|
|
- accept=".json,.yaml,.yml,.zip"
|
|
|
|
|
- :multiple="false"
|
|
|
|
|
- :limit="1"
|
|
|
|
|
- :auto-upload="true"
|
|
|
|
|
- :drag="true"
|
|
|
|
|
- v-model="files"
|
|
|
|
|
- :tip="$t('workflowTrade.workflowFileUploadTip')"
|
|
|
|
|
- />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
|
|
|
|
|
- <div class="gap10">
|
|
|
|
|
- <div class="line_vertical"></div>
|
|
|
|
|
- <div class="font_size20 bold">{{$t('common.basicInfo')}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="mt10">
|
|
|
|
|
- <el-form-item :label="$t('workflowTrade.workflowTitle')" prop="workflowTitle" v-show="!isFullscreen">
|
|
|
|
|
- <el-input v-model="ruleForm.workflowTitle" :placeholder="$t('workflowTrade.placeholderWorkflowTitle')" maxlength="50"/>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item :label="$t('workflowTrade.workflowCategory')" prop="categoryId3" v-show="!isFullscreen">
|
|
|
|
|
- <el-cascader
|
|
|
|
|
- v-model="categoryIdList"
|
|
|
|
|
- :options="categoryListTree"
|
|
|
|
|
- :placeholder="$t('workflowTrade.placeholderWorkflowCategory')"
|
|
|
|
|
- style="width:100%"
|
|
|
|
|
- :props="{
|
|
|
|
|
- label: 'categoryName',
|
|
|
|
|
- value: 'categoryId',
|
|
|
|
|
- children: 'children',
|
|
|
|
|
- }"
|
|
|
|
|
- />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item :label="$t('workflowTrade.workflowDescription')" prop="description" v-show="!isFullscreen">
|
|
|
|
|
- <el-input type="textarea" v-model="ruleForm.description" :placeholder="$t('workflowTrade.placeholderWorkflowDescription')" maxlength="500" show-word-limit/>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item :label="$t('common.coverImage')" prop="coverImage" v-show="!isFullscreen">
|
|
|
|
|
- <!-- 图片类型 -->
|
|
|
|
|
- <FileUploader
|
|
|
|
|
- ref="fileUploader"
|
|
|
|
|
- accept="image/*"
|
|
|
|
|
- :multiple="false"
|
|
|
|
|
- :limit="1"
|
|
|
|
|
- :auto-upload="true"
|
|
|
|
|
- list-type="picture-card"
|
|
|
|
|
- :data="{ directory: 'workflow' }"
|
|
|
|
|
- buttonText=""
|
|
|
|
|
- v-model="coverImage"
|
|
|
|
|
- tip=""
|
|
|
|
|
- @success="handleUploadSuccess"
|
|
|
|
|
- @error="handleUploadError"
|
|
|
|
|
- @progress="handleUploadProgress"
|
|
|
|
|
- />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item :label="$t('common.workflowPreview')" v-show="!isFullscreen">
|
|
|
|
|
- <div>{{$t('workflowTrade.supportBatchUpload')}}</div>
|
|
|
|
|
- <!-- 图片类型 -->
|
|
|
|
|
- <FileUploader
|
|
|
|
|
- ref="fileUploader"
|
|
|
|
|
- accept="image/*"
|
|
|
|
|
- :multiple="true"
|
|
|
|
|
- :limit="5"
|
|
|
|
|
- :auto-upload="true"
|
|
|
|
|
- list-type="picture-card"
|
|
|
|
|
- :data="{ directory: 'workflow' }"
|
|
|
|
|
- buttonText=""
|
|
|
|
|
- v-model="images"
|
|
|
|
|
- tip=""
|
|
|
|
|
- @success="handleUploadSuccess"
|
|
|
|
|
- @error="handleUploadError"
|
|
|
|
|
- @progress="handleUploadProgress"
|
|
|
|
|
- />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <!-- <el-form-item :label="$t('common.Detail')" prop="workflowContent">
|
|
|
|
|
- <BlockNoteEditor v-model="editorContent" :editable="true" class="border"/>
|
|
|
|
|
- </el-form-item> -->
|
|
|
|
|
- <el-form-item :label="$t('common.Detail')" prop="workflowContent">
|
|
|
|
|
- <div class="editor-container" :class="{ 'fullscreen': isFullscreen }">
|
|
|
|
|
- <div class="editor-header" v-if="isFullscreen">
|
|
|
|
|
- <span class="editor-title">{{$t('common.Detail')}}</span>
|
|
|
|
|
- <el-button
|
|
|
|
|
- icon="FullScreen"
|
|
|
|
|
- @click="toggleFullscreen"
|
|
|
|
|
- size="small"
|
|
|
|
|
- class="exit-fullscreen-btn"
|
|
|
|
|
- >
|
|
|
|
|
- {{$t('common.exitFullscreen')}}
|
|
|
|
|
- </el-button>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="editor-content">
|
|
|
|
|
- <BlockNoteEditor
|
|
|
|
|
- v-model="editorContent"
|
|
|
|
|
- :editable="true"
|
|
|
|
|
- class="border"
|
|
|
|
|
- :class="{ 'fullscreen-editor': isFullscreen }"
|
|
|
|
|
|
|
+ <div class="flex-between mt10">
|
|
|
|
|
+ <div class="flex_1 mr20">
|
|
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-position="top" class="page-add">
|
|
|
|
|
+ <div class="padding16 bg_color_fff border_radius_10 box_shadow_card" v-show="!isFullscreen">
|
|
|
|
|
+ <div class="gap10">
|
|
|
|
|
+ <div class="line_vertical"></div>
|
|
|
|
|
+ <div class="font_size20 bold"><span class="color_required font_size16">*</span>{{$t('workflowTrade.fileUpload')}}</div>
|
|
|
|
|
+ <div class="gray999 font_size14">{{$t('workflowTrade.supportFormat')}}:JSON、YAML、ZIP({{$t('common.maxSize')}}10MB)</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mt10">
|
|
|
|
|
+ <el-form-item label="" prop="workflowFile">
|
|
|
|
|
+ <!-- 上传 -->
|
|
|
|
|
+ <FileUploader
|
|
|
|
|
+ ref="fileUploader"
|
|
|
|
|
+ accept=".json,.yaml,.yml,.zip"
|
|
|
|
|
+ :multiple="false"
|
|
|
|
|
+ :limit="1"
|
|
|
|
|
+ :auto-upload="true"
|
|
|
|
|
+ :drag="true"
|
|
|
|
|
+ v-model="files"
|
|
|
|
|
+ :tip="$t('workflowTrade.workflowFileUploadTip')"
|
|
|
/>
|
|
/>
|
|
|
- </div>
|
|
|
|
|
- <el-button
|
|
|
|
|
- v-if="!isFullscreen"
|
|
|
|
|
- icon="FullScreen"
|
|
|
|
|
- @click="toggleFullscreen"
|
|
|
|
|
- size="small"
|
|
|
|
|
- class="fullscreen-btn"
|
|
|
|
|
- >
|
|
|
|
|
- {{$t('common.fullscreenEdit')}}
|
|
|
|
|
- </el-button>
|
|
|
|
|
|
|
+ </el-form-item>
|
|
|
</div>
|
|
</div>
|
|
|
- </el-form-item>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card" v-show="!isFullscreen">
|
|
|
|
|
- <div class="gap10 mb20">
|
|
|
|
|
- <div class="line_vertical"></div>
|
|
|
|
|
- <div class="font_size20 bold">{{$t('workflowTrade.priceSetting')}}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <el-form-item :label="$t('workflowTrade.paySetting')" style="width: 600px">
|
|
|
|
|
- <div class="gap20 mt10 mb20">
|
|
|
|
|
- <div class="payType gap10" @click="workflowPriceType = 'pay'"
|
|
|
|
|
- :class="{'active': workflowPriceType === 'pay'}">
|
|
|
|
|
- <div class="checkType"></div>
|
|
|
|
|
- <div>{{$t('workflowTrade.paySettingTip')}}</div>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
|
|
|
|
|
+ <div class="gap10">
|
|
|
|
|
+ <div class="line_vertical"></div>
|
|
|
|
|
+ <div class="font_size20 bold">{{$t('common.basicInfo')}}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="payType gap10" @click="workflowPriceType = 'free';ruleForm.workflowPrice=''"
|
|
|
|
|
- :class="{'active': workflowPriceType === 'free'}">
|
|
|
|
|
- <div class="checkType"></div>
|
|
|
|
|
- <div>{{$t('workflowTrade.freeSettingTip')}}</div>
|
|
|
|
|
|
|
+ <div class="mt10">
|
|
|
|
|
+ <el-form-item :label="$t('workflowTrade.workflowTitle')" prop="workflowTitle" v-show="!isFullscreen">
|
|
|
|
|
+ <el-input v-model="ruleForm.workflowTitle" :placeholder="$t('workflowTrade.placeholderWorkflowTitle')" maxlength="50"/>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item :label="$t('workflowTrade.workflowCategory')" prop="categoryId3" v-show="!isFullscreen">
|
|
|
|
|
+ <el-cascader
|
|
|
|
|
+ v-model="categoryIdList"
|
|
|
|
|
+ :options="categoryListTree"
|
|
|
|
|
+ :placeholder="$t('workflowTrade.placeholderWorkflowCategory')"
|
|
|
|
|
+ style="width:100%"
|
|
|
|
|
+ :props="{
|
|
|
|
|
+ label: 'categoryName',
|
|
|
|
|
+ value: 'categoryId',
|
|
|
|
|
+ children: 'children',
|
|
|
|
|
+ }"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item :label="$t('workflowTrade.workflowDescription')" prop="description" v-show="!isFullscreen">
|
|
|
|
|
+ <el-input type="textarea" v-model="ruleForm.description" :placeholder="$t('workflowTrade.placeholderWorkflowDescription')" maxlength="500" show-word-limit/>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item :label="$t('common.coverImage')" prop="coverImage" v-show="!isFullscreen">
|
|
|
|
|
+ <!-- 图片类型 -->
|
|
|
|
|
+ <FileUploader
|
|
|
|
|
+ ref="fileUploader"
|
|
|
|
|
+ accept="image/*"
|
|
|
|
|
+ :multiple="false"
|
|
|
|
|
+ :limit="1"
|
|
|
|
|
+ :auto-upload="true"
|
|
|
|
|
+ list-type="picture-card"
|
|
|
|
|
+ :data="{ directory: 'workflow' }"
|
|
|
|
|
+ buttonText=""
|
|
|
|
|
+ v-model="coverImage"
|
|
|
|
|
+ tip=""
|
|
|
|
|
+ @success="handleUploadSuccess"
|
|
|
|
|
+ @error="handleUploadError"
|
|
|
|
|
+ @progress="handleUploadProgress"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item :label="$t('common.workflowPreview')" v-show="!isFullscreen">
|
|
|
|
|
+ <div>{{$t('workflowTrade.supportBatchUpload')}}</div>
|
|
|
|
|
+ <!-- 图片类型 -->
|
|
|
|
|
+ <FileUploader
|
|
|
|
|
+ ref="fileUploader"
|
|
|
|
|
+ accept="image/*"
|
|
|
|
|
+ :multiple="true"
|
|
|
|
|
+ :limit="5"
|
|
|
|
|
+ :auto-upload="true"
|
|
|
|
|
+ list-type="picture-card"
|
|
|
|
|
+ :data="{ directory: 'workflow' }"
|
|
|
|
|
+ buttonText=""
|
|
|
|
|
+ v-model="images"
|
|
|
|
|
+ tip=""
|
|
|
|
|
+ @success="handleUploadSuccess"
|
|
|
|
|
+ @error="handleUploadError"
|
|
|
|
|
+ @progress="handleUploadProgress"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <!-- <el-form-item :label="$t('common.Detail')" prop="workflowContent">
|
|
|
|
|
+ <BlockNoteEditor v-model="editorContent" :editable="true" class="border"/>
|
|
|
|
|
+ </el-form-item> -->
|
|
|
|
|
+ <el-form-item :label="$t('common.Detail')" prop="workflowContent">
|
|
|
|
|
+ <div class="editor-container" :class="{ 'fullscreen': isFullscreen }">
|
|
|
|
|
+ <div class="editor-header" v-if="isFullscreen">
|
|
|
|
|
+ <span class="editor-title">{{$t('common.Detail')}}</span>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ icon="FullScreen"
|
|
|
|
|
+ @click="toggleFullscreen"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ class="exit-fullscreen-btn"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{$t('common.exitFullscreen')}}
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="editor-content">
|
|
|
|
|
+ <BlockNoteEditor
|
|
|
|
|
+ v-model="editorContent"
|
|
|
|
|
+ :editable="true"
|
|
|
|
|
+ class="border"
|
|
|
|
|
+ :class="{ 'fullscreen-editor': isFullscreen }"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ v-if="!isFullscreen"
|
|
|
|
|
+ icon="FullScreen"
|
|
|
|
|
+ @click="toggleFullscreen"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ class="fullscreen-btn"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{$t('common.fullscreenEdit')}}
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-form-item>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <el-input v-model="ruleForm.workflowPrice" :placeholder="$t('workflowTrade.placeholderPrice')" maxlength="50" type="number" v-if="workflowPriceType === 'pay'">
|
|
|
|
|
- <template #append>{{$t('common.baomibi')}}</template>
|
|
|
|
|
- </el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
|
|
+ <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card" v-show="!isFullscreen">
|
|
|
|
|
+ <div class="gap10 mb20">
|
|
|
|
|
+ <div class="line_vertical"></div>
|
|
|
|
|
+ <div class="font_size20 bold">{{$t('workflowTrade.priceSetting')}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <el-form-item :label="$t('workflowTrade.paySetting')" style="width: 600px">
|
|
|
|
|
+ <div class="gap20 mt10 mb20">
|
|
|
|
|
+ <div class="payType gap10" @click="workflowPriceType = 'pay'"
|
|
|
|
|
+ :class="{'active': workflowPriceType === 'pay'}">
|
|
|
|
|
+ <div class="checkType"></div>
|
|
|
|
|
+ <div>{{$t('workflowTrade.paySettingTip')}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="payType gap10" @click="workflowPriceType = 'free';ruleForm.workflowPrice=''"
|
|
|
|
|
+ :class="{'active': workflowPriceType === 'free'}">
|
|
|
|
|
+ <div class="checkType"></div>
|
|
|
|
|
+ <div>{{$t('workflowTrade.freeSettingTip')}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-input v-model="ruleForm.workflowPrice" :placeholder="$t('workflowTrade.placeholderPrice')" maxlength="50" type="number" v-if="workflowPriceType === 'pay'">
|
|
|
|
|
+ <template #append>{{$t('common.baomibi')}}</template>
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="mt20" v-show="!isFullscreen">
|
|
|
|
|
+ <el-button type="primary" class="font_size16 gradient"
|
|
|
|
|
+ :loading="isSubmiting"
|
|
|
|
|
+ @click="submitForm" size="large">
|
|
|
|
|
+ <el-icon><Promotion /></el-icon>
|
|
|
|
|
+ <span class="ml10">{{$t('common.publishWorkflow')}}</span>
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-button class="font_size16" @click="goBack" size="large">
|
|
|
|
|
+ <el-icon><Close /></el-icon>
|
|
|
|
|
+ <span class="ml10">{{$t('common.cancel')}}</span>
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-form>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="mt20" v-show="!isFullscreen">
|
|
|
|
|
- <el-button type="primary" class="font_size16 gradient"
|
|
|
|
|
- :loading="isSubmiting"
|
|
|
|
|
- @click="submitForm" size="large">
|
|
|
|
|
- <el-icon><Promotion /></el-icon>
|
|
|
|
|
- <span class="ml10">{{$t('common.publishWorkflow')}}</span>
|
|
|
|
|
- </el-button>
|
|
|
|
|
- <el-button class="font_size16" @click="goBack" size="large">
|
|
|
|
|
- <el-icon><Close /></el-icon>
|
|
|
|
|
- <span class="ml10">{{$t('common.cancel')}}</span>
|
|
|
|
|
- </el-button>
|
|
|
|
|
|
|
+ <!-- 右边内容 -->
|
|
|
|
|
+ <div class="detail_right">
|
|
|
|
|
+ <div class="detail_right_content detail_right">
|
|
|
|
|
+ <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
|
|
|
|
|
+ <div class="gap10">
|
|
|
|
|
+ <div class="line_vertical"></div>
|
|
|
|
|
+ <div class="font_size20 bold">{{$t('workflowTradeAdd.publishRules')}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- 无序列表 -->
|
|
|
|
|
+ <div class="font_size16 ql-container">
|
|
|
|
|
+ <div class="ql-editor">
|
|
|
|
|
+ <div v-html="release_rules"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- </el-form>
|
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -173,6 +194,7 @@ const route = useRoute()
|
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
import { getCategoryListTree } from '@/api/category.js'
|
|
import { getCategoryListTree } from '@/api/category.js'
|
|
|
|
|
+import { getAgreementType } from '@/api/common.js'
|
|
|
import { publishAdd, getPublishDetail,publishEdit } from '@/api/publish.js'
|
|
import { publishAdd, getPublishDetail,publishEdit } from '@/api/publish.js'
|
|
|
|
|
|
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useI18n } from 'vue-i18n'
|
|
@@ -180,6 +202,9 @@ const { t } = useI18n()
|
|
|
|
|
|
|
|
// 防止重复提交的加载状态
|
|
// 防止重复提交的加载状态
|
|
|
const isSubmiting = ref(false)
|
|
const isSubmiting = ref(false)
|
|
|
|
|
+// 发布规则
|
|
|
|
|
+const release_rules = ref('');
|
|
|
|
|
+
|
|
|
|
|
|
|
|
// 从路由参数中获取 activePlatform
|
|
// 从路由参数中获取 activePlatform
|
|
|
const activePlatform = ref(route.query.activePlatform || '');
|
|
const activePlatform = ref(route.query.activePlatform || '');
|
|
@@ -265,6 +290,7 @@ onMounted(() => {
|
|
|
if(publishId.value){
|
|
if(publishId.value){
|
|
|
getDetail();
|
|
getDetail();
|
|
|
}
|
|
}
|
|
|
|
|
+ getAgreementTypeFn();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// 提交表单
|
|
// 提交表单
|
|
@@ -387,6 +413,12 @@ const toggleFullscreen = () => {
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
+const getAgreementTypeFn = () => {
|
|
|
|
|
+ getAgreementType({agreementType: 'workflow_rules'}).then(res => {
|
|
|
|
|
+ console.log(res)
|
|
|
|
|
+ release_rules.value = res.data.content || '';
|
|
|
|
|
+ })
|
|
|
|
|
+};
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
.workflow-add{
|
|
.workflow-add{
|