axwen-test31 2.0.0

package/src/views/reach/business/businessCopy.vue

@@ -0,0 +1,1017 @@
+<template>
+    <div class="form-container" v-loading="isLoading">
+      <!-- 整个表单用一个 el-form 包裹 -->
+      <el-form :model="form" label-width="120px" ref="formRef" :rules="rules" label-position="top">
+        <!-- 基本信息 -->
+        <el-card class="form-card mb-4">
+          <template #header>
+            <div class="card-header">
+              <span>基本信息</span>
+            </div>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="标题：" prop="base.title">
+                <el-input v-model="form.base.title" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="优先级：" prop="base.priority">
+                <el-input-number v-model.number="form.base.priority" :min="1" :max="999999" :controls="false"
+                  placeholder="请输入优先级" style="width: 100%;" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="说明：" prop="base.dsc">
+                <el-input type="textarea" :rows="4" v-model="form.base.dsc" placeholder="请输入说明" :maxlength="500" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-card>
+        
+        <!-- 触发条件 -->
+        <el-card class="form-card mb-4" v-show="this.shouldShowCard">
+          <template #header>
+            <div class="card-header">
+              <span>触发条件</span>
+            </div>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item prop="reach.eventRelation" >
+                <ActivitySelector label="即时行为：" displayLabel="选择事件" type="event" v-model="form.reach.eventRelation"
+                  @input="handleClickeventRelation" @select="handleSelectEvent"></ActivitySelector>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="防打扰限制：" prop="reach.limitCycleFlag" class="inline-form-item" >
+                <el-switch v-model="form.reach.limitCycleFlag" active-value="1" inactive-value="0"></el-switch>
+              </el-form-item>
+              <el-form-item label="限制周期：" prop="reach.custLimit" v-if="form.reach.limitCycleFlag === '1'">
+                <el-input-number v-model="form.reach.custLimit" controls-position="right" :min="1" :max="999999"
+                  :controls="false" style="width: 50%;"></el-input-number>
+                <el-select v-model="form.reach.limitCycleUnit" style="padding-left: 10px;width: 50%;" placeholder="请选择单位">
+                  <el-option label="天" value="D"></el-option>
+                  <el-option label="月" value="M"></el-option>
+                  <el-option label="周" value="W"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="限制频次：" prop="reach.limitCycleValue" v-if="form.reach.limitCycleFlag === '1'">
+                <el-input-number v-model="form.reach.limitCycleValue" controls-position="right" :min="1" :max="999999"
+                  :controls="false" style="width: 80%;"></el-input-number>
+                <el-button :disabled="true" style="width: 20%;background-color: #ccc;color: #FFFFFF;height: 30px;">{{'次' }}</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-card>
+        
+        <!-- 投放资源 -->
+        <el-card class="form-card mb-4">
+          <template #header>
+            <div class="card-header">
+              <span>投放资源</span>
+            </div>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="资源类型：" prop="resource.relaSourceType">
+                <el-select v-model="form.resource.relaSourceType" placeholder="请选择资源类型" style="width: 100%;"
+                @change="handleResourceType">
+                  <el-option v-for="option in resourceTypeOptions" :key="option.value" :label="option.label"
+                    :value="option.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="受众客群：" prop="resource.custListType" :disabled="form.resource.relaSourceType === '03'">
+                <el-select v-model="form.resource.custListType" placeholder="请选择受众类型" style="width: 100%;"
+                  @change="handleResourceGroup">
+                  <el-option v-for="option in filterresourceGroupOptions" :key="option.value" :label="option.label"
+                    :value="option.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item v-show="form.resource.relaSourceType === '01' && form.resource.custListType === '1'"
+                prop="resource.custList">
+                <ActivitySelector label="选择客群：" displayLabel="选择客群"  type="group" ref="custListSelector" 
+                v-model="custListRelationName"  @input="handleClickCustList" @select="handleSelectCustData" :custListRelationCust="custListRelationCust"></ActivitySelector>
+              </el-form-item>
+              <el-form-item v-show="form.resource.relaSourceType === '02' && form.resource.custListType === '1'"
+                prop="resource.custList">
+                <ActivitySelector label="选择客群：" displayLabel="选择客群" type="group" ref="custListSelector" 
+                  v-model="custListRelationName" @input="handleClickCustList" @select="handleSelectCustData" :custListRelationCust="custListRelationCust" >
+                </ActivitySelector>
+              </el-form-item>
+              <el-form-item v-show="form.resource.relaSourceType === '00' && form.resource.custListType === '1'"
+                prop="resource.custList">
+                <ActivitySelector label="选择客群：" displayLabel="选择客群" type="group" ref="custListSelector" 
+                  v-model="custListRelationName" @input="handleClickCustList" @select="handleSelectCustData" :custListRelationCust="custListRelationCust">
+                </ActivitySelector>
+              </el-form-item>
+              <!-- 其他资源类型的客群选择 -->
+            </el-col>
+            <el-col :span="12">
+              <el-form-item v-if="form.resource.relaSourceType === '03'" prop="resource.activity">
+                <ActivitySelector label="活动：" displayLabel="选择活动" type="activity" v-model="activity" @input="handleClickActList"
+                  @select="handleSelectActData" ></ActivitySelector>
+              </el-form-item>
+              <el-form-item v-if="form.resource.relaSourceType === '01'" prop="resource.activity">
+                <ActivitySelector label="活动：" displayLabel="选择活动" type="activity" v-model="activity" @input="handleClickActList"
+                  @select="handleSelectActData" @custCnt="handleSelectActCustData"></ActivitySelector>
+              </el-form-item>
+              <el-form-item v-if="form.resource.relaSourceType === '02'" prop="resource.power">
+                <ActivitySelector label="权益：" displayLabel="选择权益"  type="exteral"  v-model="power" @input="handleClickExtList"
+                  @select="handleSelectExtData"></ActivitySelector>
+              </el-form-item>
+              <el-form-item label="跳转链接" v-if="form.resource.relaSourceType === '00'" prop="resource.jumpUrl"> <el-input v-model="form.resource.jumpUrl"></el-input>
+              </el-form-item>
+              <el-form-item label="下发数量："
+                v-if="form.resource.relaSourceType === '02' " prop="resource.sourceNum">
+                <el-input-number v-model="form.resource.sourceNum" placeholder="请输入下发数量" style="width: 80%;" :min="1"
+                  :max="999999" :controls="false"></el-input-number>
+                <el-button :disabled="true"
+                  style="width: 20%;background-color: #ccc;color: #FFFFFF;height: 30px;">人次</el-button>
+              </el-form-item>
+              <el-form-item label="是否跳转：" v-if="form.resource.relaSourceType === '02'" prop="resource.resourceJumpFlag"
+                class="inline-form-item">
+                <el-switch v-model="form.resource.resourceJumpFlag" active-value="1" inactive-value="0" />
+              </el-form-item>
+              <el-form-item label="封面图：">
+                <el-row :gutter="20">
+                  <el-col v-for="(item, index) in uploadList" :key="index" :span="8">
+                    <ImagePop @select="(url) => handleImagePop(url, index)" :fileSize="parseSize(item.size)" 
+                      :value="item.url"></ImagePop>
+                    <span class="btn-text" >尺寸：{{ item.size }}px</span>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-card>
+        
+        <!-- 商机有效期 -->
+        <el-card class="form-card mb-4">
+          <template #header>
+            <div class="card-header">
+              <span>商机有效期</span>
+            </div>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="开始时间" prop="business.startTime">
+                <el-date-picker v-model="form.business.startTime" type="datetime" placeholder="请选择开始时间" style="width: 100%;" 
+                  value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="结束时间" prop="business.endTime">
+                <el-date-picker v-model="form.business.endTime" type="datetime" placeholder="请选择结束时间" style="width: 100%;"
+                  value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-card>
+        <div style="display: flex; justify-content: center; margin-top: 20px;">
+        <el-button @click="cancelForm">取消</el-button>
+        <el-button type="primary" plain @click="saveForm" :disabled="this.pageState === 'detail'">保存</el-button>
+        <el-button type="primary" @click="submitForm" :disabled="this.pageState === 'detail'">保存并提交审批</el-button>
+      </div>
+      </el-form>
+    </div>
+  </template>
+  
+  <script>
+  import { searchResourceNew, showResourceDetail,approvalResource } from '@/api/reach'
+  import ImagePop from '../resource-state/components/image-con.vue'
+  import ActivitySelector from '../resource-state/components/activitySelector.vue'
+  
+  export default {
+    components: {
+      ActivitySelector,
+      ImagePop
+    },
+    data() {
+        // 自定义校验规则：结束时间需大于开始时间
+        const validateEndTime = (rule, value, callback) => {
+        if (!value || !this.form.business.startTime) {
+          callback();
+          return;
+        }
+        if (new Date(value) <= new Date(this.form.business.startTime)) {
+          callback(new Error('结束时间必须大于开始时间'));
+        } else {
+          callback();
+        }
+      };
+  
+      // 自定义校验：当防打扰开启时验证相关字段
+      const validateLimitFields = (rule, value, callback) => {
+        if (this.form.reach.limitCycleFlag === '1' && !value) {
+          callback(new Error('请填写完整防打扰设置'));
+        } else {
+          callback();
+        }
+      };
+  
+      const validateStartTime = (rule, value, callback) => {
+        const now = new Date();
+        const selectedTime = new Date(value);
+  
+        if (!value) {
+          callback(new Error('请选择开始时间'));
+        } else if (selectedTime < now) {
+          callback(new Error('开始时间不能早于当前时间'));
+        } else {
+          callback(); // 校验通过
+        }
+      };
+      return {
+        pageState: '',
+        channelType: '',
+        resourceNicheType: '',
+        activity: '',
+        power: '',
+        event: '',
+        group: '',
+        uploadList: [],
+        resourceTypeOptions: [],
+        resourceGroupOptions: [],
+        filterresourceGroupOptions: [],
+        reachShowOption:[],
+        isLoading: false,
+        isReadOnly: true,
+        custListRelationName: '',
+        custListRelationCust:'',
+        pkId: '',
+        form: {
+          pkId: '',
+          resourceNicheId: '',
+          base: {
+            title: '',
+            priority: undefined,
+            dsc: ''
+          },
+          reach: {
+            eventRelation: '',//事件关系
+            eventCode: '',//事件Code
+            custLimit: undefined,
+            limitCycle: undefined,
+            limitCycleUnit: 'D',
+            limitCycleFlag:'1',
+            limitCycleValue: undefined
+          },
+          resource: {
+            relaSourceType: '',//关联资源类型
+            relaSourceId: '',//关联资源ID
+            relaSourceName: '',//关联资源名称
+            custListType: null,//客户类型0.全部,1.特定客群,2.空客群
+            custListRelation: {
+              groupList: {},
+              groupType: '',
+            },
+            custList: '',
+            pictureList: [],//图片数组
+            sourceNum: undefined,//下发数量
+            jumpUrlSourceId: '',//跳转链接原始ID
+            jumpUrlName: '',//跳转链接原始名称
+            jumpUrl: '',//跳转链接
+            jumpUrlFile: {},//跳转类型位图文时的文件
+            jumpUrlType: 0,// 0.图文,1.活动,2.产品
+            localPicture: '',//图片地址
+            adPicture: '',//广告图片
+            adPictureFile: '',//封面图片文件
+            relaSignUp: 'true',//是否参与活动
+            resourceJumpFlag: '0',//资源跳转
+            power:'',
+            activity: '',
+          },
+          business: {
+            startTime: '',
+            endTime: '',
+          },
+          adStatus: null,//状态
+          listingStatus: null,//审批状态
+          libraryId: '',
+          suggest: '',
+          realityEndTime: '',// 实际结束时间
+          crtOrg: '',//创建机构
+          crtOrgPath: '',//创建机构路径
+        },
+        // rules: {
+        //   // 基本信息
+        //   'base.title': [{ required: true, message: '请输入标题', trigger: 'blur' }],
+        //   'base.priority': [
+        //     { required: true, message: '请输入优先级', trigger: 'blur' },
+        //     { type: 'number', min: 1, max: 999999, message: '优先级需在1-999999之间', trigger: 'blur' }
+        //   ],
+        //   'base.dsc': [{ required: true, message: '请输入说明', trigger: 'blur' }],
+          
+        //   // 触发条件
+        //   'reach.eventRelation': [{ required: true, message: '请选择事件', trigger: 'change' }],
+        //   'reach.custLimit': [{ validator: validateLimitFields, trigger: 'blur' }],
+        //   'reach.limitCycleUnit': [{ validator: validateLimitFields, trigger: 'change' }],
+        //   'reach.limitCycleValue': [{ validator: validateLimitFields, trigger: 'blur' }],
+          
+        //   // 投放资源
+        //   'resource.relaSourceType': [{ required: true, message: '请选择资源类型', trigger: 'change' }],
+        //   'resource.custListType': [{ 
+        //     required: true, 
+        //     message: '请选择受众类型', 
+        //     trigger: 'change',
+        //     validator: (rule, value, callback) => {
+        //       if (this.form.resource.relaSourceType !== '03' && !value) {
+        //         callback(new Error('请选择受众类型'));
+        //       } else {
+        //         callback();
+        //       }
+        //     }
+        //   }],
+        //   // 'resource.custList': [{ 
+        //   //   required: true, 
+        //   //   message: '请选择客群', 
+        //   //   trigger: 'change',
+        //   //   when: () => this.form.resource.relaSourceType !== '03' && 
+        //   //                this.form.resource.custListType === '1'
+        //   // }],
+        //   // 'resource.activity': [{ 
+        //   //   required: true, 
+        //   //   message: '请选择活动', 
+        //   //   trigger: 'change',
+        //   //   when: () => this.form.resource.relaSourceType === '01' || 
+        //   //               this.form.resource.relaSourceType === '03'
+        //   // }],
+        //   // 'resource.power': [{ 
+        //   //   required: true, 
+        //   //   message: '请选择权益', 
+        //   //   trigger: 'change',
+        //   //   when: () => this.form.resource.relaSourceType === '02'
+        //   // }],
+        //   'resource.jumpUrl': [{
+        //     required: true,
+        //     message: '请输入跳转链接',
+        //     trigger: 'blur',
+        //     when: () => this.form.resource.relaSourceType === '00'
+        //   }],
+        //   'resource.sourceNum': [{
+        //     required: true,
+        //     message: '请输入下发数量',
+        //     trigger: 'blur',
+        //     type: 'number',
+        //     min: 1,
+        //     when: () => this.form.resource.relaSourceType === '02' && 
+        //                 this.form.resource.custListType === '1'
+        //   }],
+        //   // 'resource.coverImage': [{
+        //   //   required: true,
+        //   //   message: '请上传封面图',
+        //   //   trigger: 'change'
+        //   // }],
+          
+        //   // 商机有效期
+        //   'business.startTime': [
+        //     { required: true, message: '请选择开始时间', trigger: 'change' },
+        //   { validator: validateStartTime, trigger: 'change' }
+        //   ],
+        //   'business.endTime': [
+        //     { required: true, message: '请选择结束时间', trigger: 'change' },
+        //     { validator: validateEndTime, trigger: 'change' }
+        //   ]
+        // },
+      };
+    },
+    computed: {
+      selectedLabel() {
+        const map = {
+          D: '天',
+          M: '月',
+          W: '周',
+        };
+        return map[this.form.reach.limitCycleUnit] || '';
+      },
+      rules() {
+        const shouldValidateCustLimit = this.shouldShowCard && this.form.reach.limitCycleFlag === '1';
+        return {
+          'base.title': [{ required: true, message: '请输入标题', trigger: 'blur' }],
+          'base.priority': [
+            { required: true, message: '请输入优先级', trigger: 'blur' },
+            { type: 'number', min: 1, max: 999999, message: '优先级需在1-999999之间', trigger: 'blur' }
+          ],
+          'base.dsc': [{ required: true, message: '请输入说明', trigger: 'blur' }],
+          'reach.eventRelation':shouldValidateCustLimit? [{ required: true, message: '请选择事件', trigger: 'change' }] : [],
+          'reach.custLimit': shouldValidateCustLimit ? [{ required: true, message: '请输入限制周期', trigger: 'blur' }] : [],
+          'reach.limitCycleUnit': shouldValidateCustLimit ? [{ required: true, message: '请选择单位', trigger: 'change' }] : [],
+          'reach.limitCycleValue': shouldValidateCustLimit ? [{ required: true, message: '请输入限制频次', trigger: 'blur' }] : [],
+          'resource.relaSourceType': [{ required: true, message: '请选择资源类型', trigger: 'change' }],
+          'resource.custListType': [{ required: true, message: '请选择客户列表类型', trigger: 'change' }]
+        };
+      },
+      shouldShowCard() {
+        return Array.isArray(this.reachShowOption) &&
+        this.reachShowOption.some(item => item.label === this.resourceNicheType);
+    }
+    },
+    methods: {
+      async handleShowDetail(val) {
+        const res = await showResourceDetail(val)
+        if (res) {
+          const data = res.data
+          this.form.pkId = data.pkId
+          this.form.resourceNicheId = data.resourceNicheId
+          this.form.base.title = data.title + '_copy'
+          this.form.base.priority = data.priority
+          this.form.base.dsc = data.dsc
+          this.form.reach.custLimit = data.custLimit
+          this.form.reach.limitCycleFlag = data.limitCycleFlag
+          this.form.reach.limitCycleUnit = data.limitCycleUnit
+          this.form.reach.limitCycleValue = data.limitCycleValue
+          this.form.resource.relaSourceType = data.relaSourceType
+          this.handleResourceType(this.form.resource.relaSourceType)
+          this.form.resource.pictureList = data.pictureList
+          this.form.resource.sourceNum = data.sourceNum
+          this.form.resource.jumpUrlSourceId = data.jumpUrlSourceId
+          this.form.resource.jumpUrlName = data.jumpUrlName
+          this.form.resource.jumpUrl = data.jumpUrl
+          this.form.resource.jumpUrlFile = data.jumpUrlFile
+          this.form.resource.jumpUrlType = data.jumpUrlType
+          this.form.resource.localPicture = data.localPicture
+          this.form.resource.adPicture = data.adPicture
+          this.form.resource.adPictureFile = data.adPictureFile
+          this.form.resource.relaSignUp = data.relaSignUp
+          this.form.business.startTime = data.startTime
+          this.form.business.endTime = data.endTime
+          this.form.adStatus = data.adStatus
+          this.form.resource.power = this.form.resource.relaSourceId
+          this.form.resource.activity = this.form.resource.relaSourceId
+          this.form.reach.eventRelation = data.eventRelation
+          this.form.reach.eventCode = data.eventCode
+          this.form.resource.relaSourceId = data.relaSourceId
+          this.form.resource.relaSourceName = data.relaSourceName
+          this.form.resource.custListType = String(data.custListType)
+          this.form.resource.custListRelation = JSON.parse(data.custListRelation)
+          this.form.resource.custList = data.custList
+          this.custListRelationName = this.form.resource.custListRelation?.groupList?.name
+          this.custListRelationCust = this.form.resource.custListRelation?.groupList?.custCnt
+          this.power = this.form.resource.relaSourceName
+          this.activity = this.form.resource.relaSourceName
+          if (this.pageState === 'detail' || this.pageState === 'edit' ||  this.pageState === 'copy') {
+            const formatted = data.pictureList.map(item => {
+              return {
+                url: item.pictureId,
+                size: item.pictureSize,
+                rnrId:item.rnrId
+              };
+            });
+            this.uploadList = formatted;
+          }
+          this.$nextTick(() => {
+            this.$refs.formRef.clearValidate();
+          });
+        }
+      },
+      validateImage(url, expectedSize) {
+        return new Promise((resolve) => {
+          const img = new Image();
+          img.src = url;
+  
+          img.onload = () => {
+            const [w, h] = expectedSize.split('x').map(Number);
+            if (img.width <= w && img.height <= h) {
+              resolve({ valid: true });
+            } else {
+              resolve({
+                valid: false,
+                message: `图片 "${url}" 尺寸不符，期望 ${expectedSize}，实际 ${img.width}x${img.height}`
+              });
+            }
+          };
+  
+          img.onerror = () => {
+            resolve({ valid: false, message: `图片加载失败：${url}` });
+          };
+        });
+      },
+      async formatAndValidateUploadList() {
+        const { uploadList } = this;
+        const formatted = [];
+        const errors = [];
+  
+        for (let i = 0; i < uploadList.length; i++) {
+          const item = uploadList[i];
+          const imageIndex = i + 1;
+  
+          if (!item.url) {
+            errors.push(`第 ${imageIndex} 张图片未上传`);
+            return { success: false, errors };
+          }
+        }
+  
+        for (let i = 0; i < uploadList.length; i++) {
+          const item = uploadList[i];
+          const { url, size , rnrId } = item;
+          const imageIndex = i + 1;
+  
+          const [expectedWidth, expectedHeight] = size.split('x').map(Number);
+  
+          const img = new Image();
+          img.src = url;
+  
+          try {
+            await new Promise((resolve, reject) => {
+              img.onload = () => resolve(img);
+              img.onerror = () => reject(new Error(`图片加载失败：${url}`));
+            });
+  
+            // 校验宽高是否超出限制
+            if (img.width > expectedWidth) {
+              errors.push(`第 ${imageIndex} 张图片宽度超出限制（最大 ${expectedWidth}px）`);
+              return { success: false, errors };
+            }
+  
+            if (img.height > expectedHeight) {
+              errors.push(`第 ${imageIndex} 张图片高度超出限制（最大 ${expectedHeight}px）`);
+              return { success: false, errors };
+            }
+  
+            // 格式化数据
+            formatted.push({
+              pictureId: url,
+              pictureSize: size,
+              rnrId:rnrId
+            });
+  
+          } catch (e) {
+            errors.push(`第 ${imageIndex} 张图片加载失败`);
+            return { success: false, errors };
+          }
+        }
+        // 如果没有错误，则返回成功和格式化后的数据
+        return { success: true, data: formatted };
+      },
+      validateForm() {
+    return new Promise((resolve, reject) => {
+      this.$refs.formRef.validate(valid => {
+        if (valid) {
+          resolve(true);
+        } else {
+          this.$message.error('表单验证失败，请检查输入内容');
+          resolve(false); // 或者 reject(false)
+        }
+      });
+    });
+  },
+      async saveForm() {
+        this.isLoading = true;
+        try {
+        const valid = await this.validateForm();
+        if (!valid) return;
+        if(!this.form.reach.eventRelation  &&  this.shouldShowCard){
+          this.$message.error('请选择事件');
+          return false;
+        }
+        if(this.form.resource.relaSourceType  && this.form.resource.custListType === '1'){
+          if(this.custListRelationName === ''){
+            this.$message.error('请选择客群');
+            return false
+          }
+          if(this.form.resource.relaSourceType === '02'){
+            if(this.power === ''){
+            this.$message.error('请选择权益');
+            return false
+            }
+          }
+          if(this.form.resource.relaSourceType === '03' ||this.form.resource.relaSourceType === '01'){
+            if(this.activity === ''){
+            this.$message.error('请选择活动');
+            return false
+            }
+          }
+        }
+        const result = await this.formatAndValidateUploadList();
+        if (!result.success) {
+          // 只有一个错误信息，直接显示即可
+          this.$message.error(result.errors[0]);
+          return;
+        }
+        const params = {
+          pkId: '',
+          resourceNicheId: this.form.resourceNicheId,
+          channelType: this.channelType,
+          resourceNicheType:this.resourceNicheType,
+          title: this.form.base.title,
+          priority: this.form.base.priority,
+          jumpUrlSourceId: this.form.resource.jumpUrlSourceId,
+          jumpUrl: this.form.resource.jumpUrl,
+          jumpUrlName: this.form.resource.jumpUrlName,
+          jumpUrlType: this.form.resource.jumpUrlType,
+          custListType: this.form.resource.custListType,
+          custListRelation: JSON.stringify(this.form.resource.custListRelation),
+          custList: this.form.resource.custList,
+          dsc: this.form.base.dsc,
+          startTime: this.form.business.startTime,
+          endTime: this.form.business.endTime,
+          eventRelation: this.form.reach.eventRelation,
+          eventCode: this.form.reach.eventCode,
+          relaSourceType: this.form.resource.relaSourceType,
+          relaSourceId: this.form.resource.relaSourceId,
+          relaSourceName: this.form.resource.relaSourceName,
+          relaSignUp: this.form.resource.relaSignUp === 'true' ? '1' : '0',
+          messageType: '',
+          resourceJumpFlag: this.form.resource.resourceJumpFlag,
+          custLimit: this.form.reach.custLimit,
+          limitCycle: this.form.reach.limitCycle,
+          limitCycleFlag:this.form.reach.limitCycleFlag,
+          limitCycleUnit: this.form.reach.limitCycleUnit,
+          limitCycleValue: this.form.reach.limitCycleValue,
+          sourceNum: this.form.resource.sourceNum,
+          crtOrg: "",
+          crtOrgPath: "",
+          adStatus: null,
+          listingStatus: null,
+          pictureList: result.data,
+          localPicture: result.data[0].pictureId
+        }
+  
+          const { errorMsg, errorCode } = await searchResourceNew(params)
+          if (errorCode === '000000') {
+            this.$message.success(errorMsg);
+            this.$router.replace({
+              name: 'businessList',
+              query: {
+                resourceNicheId: this.form.resourceNicheId,
+                resourceNicheType: this.resourceNicheType,
+                __beforeClose: true
+              }
+            });
+          } else {
+            this.$message.error(errorMsg || '保存失败')
+          }
+        } catch (error) {
+          this.$message.error('请求失败，请稍后重试')
+        } finally {
+          this.isLoading = false;
+        }
+      },
+      async submitForm(){
+        this.isLoading = true;
+        try {
+        const valid = await this.validateForm();
+        if (!valid) return;
+        if(!this.form.reach.eventRelation && this.shouldShowCard){
+          this.$message.error('请选择事件');
+          return false;
+        }
+        if(this.form.resource.relaSourceType  && this.form.resource.custListType === '1'){
+          if(this.custListRelationName === ''){
+            this.$message.error('请选择客群');
+            return false
+          }
+          if(this.form.resource.relaSourceType === '02'){
+            if(this.power === ''){
+            this.$message.error('请选择权益');
+            return false
+            }
+          }
+          if(this.form.resource.relaSourceType === '03' ||this.form.resource.relaSourceType === '01'){
+            if(this.activity === ''){
+            this.$message.error('请选择活动');
+            return false
+            }
+          }
+        }
+        const result = await this.formatAndValidateUploadList();
+        if (!result.success) {
+          // 只有一个错误信息，直接显示即可
+          this.$message.error(result.errors[0]);
+          return;
+        }
+        const params = {
+          pkId: '',
+          resourceNicheId: this.form.resourceNicheId,
+          channelType: this.channelType,
+          resourceNicheType:this.resourceNicheType,
+          title: this.form.base.title,
+          priority: this.form.base.priority,
+          jumpUrlSourceId: this.form.resource.jumpUrlSourceId,
+          jumpUrl: this.form.resource.jumpUrl,
+          jumpUrlName: this.form.resource.jumpUrlName,
+          jumpUrlType: this.form.resource.jumpUrlType,
+          custListType: this.form.resource.custListType,
+          custListRelation: JSON.stringify(this.form.resource.custListRelation),
+          custList: this.form.resource.custList,
+          dsc: this.form.base.dsc,
+          startTime: this.form.business.startTime,
+          endTime: this.form.business.endTime,
+          eventRelation: this.form.reach.eventRelation,
+          eventCode: this.form.reach.eventCode,
+          relaSourceType: this.form.resource.relaSourceType,
+          relaSourceId: this.form.resource.relaSourceId,
+          relaSourceName: this.form.resource.relaSourceName,
+          relaSignUp: this.form.resource.relaSignUp === 'true' ? '1' : '0',
+          messageType: '',
+          resourceJumpFlag: this.form.resource.resourceJumpFlag,
+          custLimit: this.form.reach.custLimit,
+          limitCycle: this.form.reach.limitCycle,
+          limitCycleFlag:this.form.reach.limitCycleFlag,
+          limitCycleUnit: this.form.reach.limitCycleUnit,
+          limitCycleValue: this.form.reach.limitCycleValue,
+          sourceNum: this.form.resource.sourceNum,
+          crtOrg: "",
+          crtOrgPath: "",
+          adStatus: null,
+          listingStatus: null,
+          pictureList: result.data,
+          localPicture: result.data[0].pictureId
+        }
+  
+          const { errorMsg, errorCode ,data} = await searchResourceNew(params)
+          if (errorCode === '000000') {
+            const approvalResult = await approvalResource(data.pkId)
+                          const { errorCode: approvalCode, errorMsg: approvalMsg } = approvalResult;
+                          if (approvalCode === '000000') {
+                              this.$router.replace({
+                                  name: 'businessList',
+                                  query: {
+                                      resourceNicheId: this.form.resourceNicheId,
+                                      resourceNicheType: this.resourceNicheType,
+                                      __beforeClose: true
+                                  }
+                              });
+                              this.$message.success(approvalMsg);
+                          } else {
+                              this.$message.error(approvalMsg || '保存失败')
+                          }
+          } else {
+            this.$message.error(errorMsg || '保存失败')
+          }
+        } catch (error) {
+          this.$message.error('请求失败，请稍后重试')
+        } finally {
+          this.isLoading = false;
+        }
+      },
+      cancelForm() {
+        this.$router.replace({
+          name: 'businessList',
+          query: {
+            resourceNicheId: this.form.resourceNicheId,
+            resourceNicheType: this.resourceNicheType,
+            __beforeClose: true
+          }
+        });
+      },
+      handleResourceType(value) {
+        if (value === '00') {
+          //自定义
+          this.filterresourceGroupOptions = [...this.resourceGroupOptions];
+          this.form.resource.custListType = ''
+          this.form.business.startTime = null
+          this.form.business.endTime = null
+          //0全部1特定2空
+        } else if (value === '03') {
+          //参与活动
+          const emptyOption = this.resourceGroupOptions.find(g => g.value === '2');
+          this.filterresourceGroupOptions = [emptyOption];
+          this.form.resource.custListType = '2'
+          this.form.business.startTime = null
+          this.form.business.endTime = null
+        } else if (value === '01') {
+          //活动
+          this.filterresourceGroupOptions = this.resourceGroupOptions.filter(g => g.value !== '2');
+          this.form.resource.custListType = ''
+          this.form.business.startTime = null
+          this.form.business.endTime = null
+        } else if (value === '02') {
+          //权益
+          this.filterresourceGroupOptions = this.resourceGroupOptions.filter(g => g.value !== '2');
+          this.form.resource.custListType = ''
+          this.form.business.startTime = null
+          this.form.business.endTime = null
+        }
+      },
+      handleResourceGroup(value) {
+        if(value !== '1'){
+          this.form.resource.custList = ''
+        }
+        console.log(value, 'value')
+      },
+      handleClickeventRelation(val) {
+        this.form.resource.eventRelation = val
+      },
+      handleSelectEvent(item) {
+        this.form.reach.eventCode = item.code
+        this.form.reach.eventRelation = item.name
+      },
+      handleClickCustList(val) {
+        console.log(val, 'handleClickCustList')
+      },
+      handleSelectCustData(item) {
+        this.form.resource.custListRelation.groupList = {
+          name: item.groupList?.name || '',
+          pkId: item.groupList?.pkId || '',
+          custCnt: item.groupList?.custCnt || ''
+        };
+        this.form.resource.custListRelation.groupType = item.groupType || '';
+        this.form.resource.custList = item.groupList?.pkId || '';
+      },
+      handleSelectActCustData(item){
+        this.form.resource.custListRelation.groupList = {
+          name: item.groupList?.name || '',
+          pkId: item.groupList?.pkId || '',
+          custCnt: item.groupList?.custCnt || ''
+        };
+        console.log(this.form.resource.custListRelation.groupList,'this.form.resource.custListRelation.groupList')
+        this.form.resource.custListRelation.groupType = item.groupType || '';
+        this.form.resource.custList = item.groupList?.pkId || '';
+        this.custListRelationName = this.form.resource.custListRelation.groupList.name
+        this.custListRelationCust = this.form.resource.custListRelation.groupList.custCnt
+      },
+      handleClickExtList(val) {
+        console.log(val, 'handleClickExtList')
+      },
+      handleSelectExtData(item) {
+        this.form.resource.relaSourceId = item[0].pkId
+        this.form.resource.relaSourceName = item[0].tmplName
+      },
+      handleClickActList(val) {
+        console.log(val, 'handleClickActList')
+      },
+      handleSelectActData(item) {
+        const data = item
+        this.form.resource.relaSourceId = data.id
+        this.form.resource.relaSourceName = data.activityName
+        if(this.form.resource.relaSourceType === '01'){
+          this.form.resource.jumpUrl = data.activityLink
+          this.form.resource.custListRelation = {
+          groupList:{
+            name:data.includeCustName,
+            pkId:data.includeCustList,
+            custCnt:data.count
+          },
+          groupType:String(data.includeCustType)
+        }
+        this.custListRelationName = data.includeCustName
+        this.form.resource.custList = data.includeCustList
+        this.form.resource.custListType = String(data.includeCustType)
+        this.form.business.startTime = data.startTime
+        this.form.business.endTime = data.endTime
+        }
+      },
+      // async initPictureNum() {
+      //   const params = {
+      //     channelType: this.channelType,
+      //     resourceNicheType: this.resourceNicheType
+      //   }
+      //   const res = await channelResourceSearch(params)
+      //   this.uploadList = res.data.map(item => ({
+      //     ...item,
+      //     url: '',
+      //   }));
+      // },
+      handleImagePop(val, index) {
+        if (val.type === 'template') {
+          const pictUrl = window.location.origin + val.url
+          this.$set(this.uploadList, index, {
+            ...this.uploadList[index],
+            url: pictUrl
+          });
+        } else if (val.type === 'local') {
+          const pictUrl = val.url
+          this.$set(this.uploadList, index, {
+            ...this.uploadList[index],
+            url: pictUrl
+          });
+        }
+      },
+      parseSize(sizeStr) {
+        if (!sizeStr) return {};
+        const [widthStr, heightStr] = sizeStr.split('x');
+        const width = parseInt(widthStr);
+        const height = parseInt(heightStr);
+        return {
+          width,
+          height,
+          minWidth: width,
+          minHeight: height,
+          maxWidth: width,
+          maxHeight: height
+        };
+      }
+    },
+    created() {
+      this.pageState = this.$route.query.state;
+      // this.channelType = this.$route.query.channelType;
+      this.resourceNicheType = this.$route.query.resourceNicheType;
+      this.$getOptionsForSystemParams(['RESOURCE_GROUP']).then(data => {
+        this.resourceGroupOptions = data[0]
+      })
+      this.$getOptionsForSystemParams(['RESOURCE_TYPE']).then(data => {
+        this.resourceTypeOptions = data[0]
+      })
+      this.$getOptionsForSystemParams(['REACH_CONDITION']).then(data => {
+        this.reachShowOption = data[0]
+      })
+  
+    },
+    mounted() {
+      // this.initPictureNum()
+      this.form.resourceNicheId = this.$route.query.resourceNicheId
+      this.pkId = this.$route.query.pkId
+      this.handleShowDetail(this.pkId)
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .form-container {
+    max-width: auto;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #FFFFFF;
+  }
+  
+  .form-card {
+    border-radius: 4px;
+  }
+  
+  .card-header {
+    font-size: 15px;
+    font-weight: bold;
+    color: #1664FF;
+  }
+  
+  .mb-4 {
+    margin-bottom: 16px;
+  }
+  
+  .inline-form-item {
+    display: flex;
+    align-items: center;
+  }
+  
+  .inline-form-item .el-form-item__content {
+    margin-left: 10px;
+  }
+  
+  .right-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  
+  .dynamic-component,
+  .cover-image {
+    width: 100%;
+  }
+  
+  /* .square-container{
+    position: relative;
+    width: 100%; 
+    padding-top: 100%; 
+    background-color: #FFFFFF;
+    border: 1px solid #c0c4cc;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  } */
+  
+  .custom-upload-btn {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    font-size: 16px;
+    background-color: transparent;
+    color: #999;
+    border: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .custom-upload-btn:hover {
+    border-color: #409eff;
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+  
+  .custom-upload-btn .el-icon-plus {
+    font-size: 2em;
+    margin-bottom: 6px;
+  }
+  
+  .btn-text {
+    font-size: 0.875em;
+    text-align: center;
+  }
+  
+  /deep/.el-form-item--small .el-form-item__label {
+    padding: inherit;
+  }
+  </style>