活动添加草稿功能；举办方输入

src/views/modules/activity/add.vue

@@ -59,10 +59,13 @@
                             <el-option v-for="item in channelOptions" :key="item.id" :label="item.channelName" :value="item.id"></el-option>
                         </el-select>
                     </el-form-item>
-                    <el-form-item label="举办方" prop="organizerId">
+                    <!-- <el-form-item label="举办方" prop="organizerId">
                         <el-select v-model="basicForm.organizerId" placeholder="请选择举办方" class="select-box" style="width: 440px;">
                             <el-option v-for="item in organizerOptions" :key="item.id" :label="item.channelName" :value="item.id"></el-option>
                         </el-select>
+                    </el-form-item> -->
+                    <el-form-item label="举办方" prop="organizerName">
+                        <el-input v-model="basicForm.organizerName" placeholder="请输入举办方名称"></el-input>
                     </el-form-item>
                     <el-form-item label="活动列表图片" prop="coverFile" class="redLabel">
                         <el-upload
@@ -100,7 +103,8 @@
                 </el-form>
                 <div class="btns adfac">
                     <el-button type="primary" @click="handleNext">下一步</el-button>
-                    <el-button type="default" @click="handleBack" style="margin-left: 16px;">返回</el-button>
+                    <el-button type="default" @click="handleTempSave" style="margin-left: 16px;">暂存</el-button>
+                    <!-- <el-button type="default" @click="handleBack" style="margin-left: 16px;">返回</el-button> -->
                 </div>
             </div>
             <div class="form" v-else-if="tidx===2">
@@ -196,6 +200,7 @@
                 </el-form>
                 <div class="btns adfac">
                     <el-button type="default" @click="handlePrevious">上一步</el-button>
+                    <el-button type="default" @click="handleTempSave" style="margin-left: 16px;">暂存</el-button>
                     <el-button type="primary" @click="handleSave" style="margin-left: 16px;">发布</el-button>
                 </div>
             </div>
@@ -240,6 +245,7 @@ const getInitialBasicForm = () => ({
   address: '',
   channelId: '',
   organizerId: '',
+  organizerName: '',
   coverFile: '',
   imageFiles: '',
   activityDetails: ''
@@ -313,8 +319,11 @@ export default {
         channelId: [
           { required: true, message: '请选择渠道方', trigger: 'change' }
         ],
-        organizerId: [
-          { required: true, message: '请选择举办方', trigger: 'change' }
+        // organizerId: [
+        //   { required: true, message: '请选择举办方', trigger: 'change' }
+        // ],
+        organizerName: [
+          { required: true, message: '请输入举办方名称', trigger: 'blur' }
         ]
       },
       url: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`,
@@ -401,8 +410,9 @@ export default {
         this.basicForm.activityStartEnd = [this.basicForm.activityStartTime, this.basicForm.activityEndTime]
         this.basicForm.channelId = this.basicForm.channelId
         this.basicForm.organizerId = this.basicForm.organizerId
-        this.fileListCover = [{ name: '', url: res.data.coverFile }]
-        this.fileListBanner = res.data.imageFiles.split(',').map(item => ({ name: '', url: item }))
+        this.basicForm.organizerName = this.basicForm.organizerName
+        if (res.data.coverFile) this.fileListCover = [{ name: '', url: res.data.coverFile }]
+        if (res.data.imageFiles) this.fileListBanner = res.data.imageFiles.split(',').map(item => ({ name: '', url: item }))
         if (this.basicForm.cityId) {
           this.cityAreaDetailInfoList(this.basicForm.provinceId)
         }
@@ -414,6 +424,15 @@ export default {
         this.moreForm.userLevelFlag = +this.moreForm.userLevel === 0 ? 0 : 1
         this.moreForm.userAgeFlag = +this.moreForm.userAgeMax === 0 ? 2 : 1
         this.moreForm.state = !!res.data.state
+
+        this.$nextTick(() => {
+          if (this.$refs.basicRef) {
+            this.$refs.basicRef.clearValidate()
+          }
+          if (this.$refs.moreRef) {
+            this.$refs.moreRef.clearValidate()
+          }
+        })
       })
     },
     updateObjectFromSource (target, source) {
@@ -555,6 +574,19 @@ export default {
         }
       })
     },
+    handleTempSave () {
+      let { signupStartEnd, activityStartEnd, ...newBasic } = JSON.parse(JSON.stringify(this.basicForm))
+      let { recruitmentFlag, userAgeFlag, userLevelFlag, ...newMore } = JSON.parse(JSON.stringify(this.moreForm))
+      let dto = { ...newBasic, ...newMore }
+      dto.activeState = -2
+      dto.state = 0
+
+      this.$http[dto.id ? 'put' : 'post']('/core/activity', dto).then(res => {
+        if (res.data.code !== 0) return this.$message.error(res.data.msg)
+        this.$message.success(dto.id ? '编辑' : '新增' + '草稿成功')
+        this.$router.push('/activity-list')
+      })
+    },
     handlePrevious () {
       this.tidx = 1
       this.$nextTick(() => {

src/views/modules/activity/list.vue

@@ -52,28 +52,28 @@
               </el-table-column>
               <el-table-column prop="activeState" label="活动状态" width="150">
                 <template #default="scope">
-                  <div class="as" :class="{'jxz':scope.row.activeState==2}">{{ activeStateCfg[scope.row.activeState] || '未知' }}</div>
+                  <div class="as" :class="activeStateColorDict[scope.row.activeState]||'grey'">{{ activeStateCfg[scope.row.activeState] || '未知' }}</div>
                 </template>
               </el-table-column>
               <el-table-column prop="" label="活动时间" width="320">
                 <template #default="scope">{{ scope.row.activityStartTime }} - {{ scope.row.activityEndTime }}</template>
               </el-table-column>
               <el-table-column prop="channelName" label="渠道方" width="120"></el-table-column>
-              <el-table-column prop="organizerName" label="举办方" width="120"></el-table-column>
+              <el-table-column prop="organizerName" label="举办方" width="120" show-overflow-tooltip></el-table-column>
               <el-table-column prop="createDate" label="创建时间" width="180"></el-table-column>
               <el-table-column label="操作" width="300" fixed="right">
                   <template #default="scope">
                       <!-- <el-button link type="text" @click="handleEdit(scope.row)" v-if="scope.row.activeState!=3&&$hasPermission('core:activity:update')">编辑</el-button> -->
                       <el-button link type="text" @click="handleEdit(scope.row)" v-if="scope.row.activeState<2&&$hasPermission('core:activity:update')">编辑</el-button>
-                      <el-button link type="text" @click="handleDetail(scope.row)" v-if="$hasPermission('core:activity:detail')">详情</el-button>
-                      <el-button link type="text" @click="handleInfo(scope.row)" v-if="$hasPermission('core:activity:info')">报名信息</el-button>
+                      <el-button link type="text" @click="handleDetail(scope.row)" v-if="$hasPermission('core:activity:detail')&&scope.row.activeState>-2">详情</el-button>
+                      <el-button link type="text" @click="handleInfo(scope.row)" v-if="$hasPermission('core:activity:info')&&scope.row.activeState>-2">报名信息</el-button>
                       <el-button link type="text" @click="handleCode(scope.row)" v-if="!scope.row.signCode&&scope.row.activeState==2&&$hasPermission('core:activity:code')">生成签到码</el-button>
                       <el-button link type="text" @click="handleReviewCode(scope.row)" v-if="scope.row.signCode&&scope.row.activeState==2&&$hasPermission('core:activity:code')">查看签到码</el-button>
                       <!-- <el-button link type="text" @click="handleUpDown(scope.row,0)" v-if="scope.row.state==1&&(scope.row.activeState==0||scope.row.activeState==3)&&$hasPermission('core:activity:updown')">下架</el-button> -->
-                      <el-button link type="text" @click="handleUpDown(scope.row,0)" v-if="scope.row.state==1&&$hasPermission('core:activity:updown')">下架</el-button>
-                      <el-button link type="text" @click="handleUpDown(scope.row,1)" v-if="scope.row.state==0&&$hasPermission('core:activity:updown')">上架</el-button>
+                      <el-button link type="text" @click="handleUpDown(scope.row,0)" v-if="scope.row.state==1&&$hasPermission('core:activity:updown')&&scope.row.activeState>-2">下架</el-button>
+                      <el-button link type="text" @click="handleUpDown(scope.row,1)" v-if="scope.row.state==0&&$hasPermission('core:activity:updown')&&scope.row.activeState>-2">上架</el-button>
                       <el-button link type="text" @click="handleCancel(scope.row)" v-if="$hasPermission('core:activity:cancel')&&scope.row.activeState!=-1&&(Date.parse(new Date())>Date.parse(scope.row.signupEndTime)&&Date.parse(new Date())<Date.parse(scope.row.activityStartTime))">取消</el-button>
-                      <el-button link type="text" @click="handleDelete(scope.row)" v-if="$hasPermission('core:activity:delete')&&scope.row.state==0&&scope.row.activeState==0">删除</el-button>
+                      <el-button link type="text" @click="handleDelete(scope.row)" v-if="($hasPermission('core:activity:delete')&&scope.row.state==0&&scope.row.activeState==0)||($hasPermission('core:activity:delete')&&scope.row.activeState==-2)">删除</el-button>
                   </template>
               </el-table-column>
             </el-table>
@@ -105,12 +105,21 @@ export default {
   data () {
     return {
       activeStateCfg: {
+        '-2': '草稿',
         '-1': '已取消',
         0: '未开始',
         1: '报名中',
         2: '进行中',
         3: '已结束'
       },
+      activeStateColorDict: {
+        '-2': 'grey',
+        '-1': 'grey',
+        0: 'red',
+        1: 'yellow',
+        2: 'blue',
+        3: 'grey'
+      },
       typeOptions: [],
       categoryOptions: [],
       queryParams: {
@@ -288,17 +297,27 @@ export default {
   }
 
   .as{
+    width: 58px;
+    height: 24px;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     font-size: 14px;
     color: #646464;
-    line-height: 16px;
-    padding: 5px 10px;
+    line-height: 24px;
+    text-align: center;
     background: #F7F7F7;
     border-radius: 6px;
     display: inline-block;
-    &.jxz{
-      background: #FFF5E8;
+    &.blue{
+      background: rgba(46,105,235,0.08);
+      color: #2E69EB;
+    }
+    &.red{
+      background: rgba(253,79,102,0.11);
+      color: #FD4F66;
+    }
+    &.yellow{
+      background: rgba(255,152,10,0.08);
       color: #FF980A;
     }
   }