axwen-test31 2.0.0

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

@@ -0,0 +1,1004 @@
+<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" :rules="this.shouldShowCard ? { required: true, message: '请选择事件', trigger: 'change' } : {}">
+                <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" :rules="this.shouldShowCard  ? { required: true, message: '请输入防打扰限制', trigger: 'blur' } : {}">
+                <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'"  
+              :rules="this.shouldShowCard && form.reach.limitCycleFlag === '1' ? { required: true, message: '请输入限制周期', trigger: 'blur' } : {}"
+              >
+                <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'"
+              :rules="this.shouldShowCard && form.reach.limitCycleFlag === '1' ? { required: true, message: '请输入限制频次', trigger: 'blur' } : {}">
+                <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.selectedCustList">
+                <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.selectedCustList">
+                <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.selectedCustList">
+                <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)" :disabled="!isSizeValid"></ImagePop>
+                    <span class="btn-text">尺寸：{{ item.size || item.customSize }}px</span>
+                    <div  style="margin-bottom: 10px;">
+                      <el-input v-model="item.customSize" placeholder="请输入尺寸，如：100x200" @change="(value) => handleSizeInput(value, item)" />
+                    </div>
+                  </el-col>
+                </el-row> -->
+                <el-row :gutter="20">
+                  <!-- 如果 uploadList 为空 -->
+                  <div v-if="uploadList.length === 0">
+                    <el-col :span="8">
+                      <ImagePop @select="(url) => handleImagePop(url, 0)" :fileSize="parseSize(defaultCustomSize)"
+                        :disabled="!isSizeValid || defaultCustomSize === ''">
+                      </ImagePop>
+                      <div style="margin-bottom: 10px;">
+                        <el-input v-model="defaultCustomSize" placeholder="请输入尺寸，如：100x200"
+                          @change="(value) => handleSizeInput(value, { customSize: defaultCustomSize })">
+                        </el-input>
+                      </div>
+                    </el-col>
+                  </div>
+  
+                  <!-- 如果 uploadList 不为空 -->
+                  <el-col v-for="(item, index) in uploadList" :key="index" :span="8">
+                    <ImagePop @select="(url) => handleImagePop(url, index)"
+                      :fileSize="parseSize(item.size || item.customSize)"
+                      :disabled="!(item.size || (item.customSize && isSizeValid))">
+                    </ImagePop>
+                    <span class="btn-text">尺寸：{{ item.size || item.customSize }}px</span>
+                    <!-- 只有当没有设定 size 或者尺寸格式不正确时显示输入框 -->
+                    <div v-if="!item.size && (!item.customSize || !isSizeValid)" style="margin-bottom: 10px;">
+                      <el-input v-model="item.customSize" placeholder="请输入尺寸，如：100x200"
+                        @change="(value) => handleSizeInput(value, item)">
+                      </el-input>
+                    </div>
+                  </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 { channelResourceSearch, searchResourceNew, 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: [],
+        reachShowOption:[],
+        filterresourceGroupOptions: [],
+        defaultCustomSize:'',
+        custListRelationName: '',
+        custListRelationCust:'',
+        isLoading: false,
+        isSizeValid: false,
+        form: {
+          pkId: '',
+          resourceNicheId: '',
+          base: {
+            title: '',
+            priority: undefined,
+            dsc: ''
+          },
+          reach: {
+            eventRelation: '',//事件关系
+            eventCode: '',//事件Code
+            custLimit: undefined,
+            limitCycleFlag: '1',
+            limitCycle: undefined,
+            limitCycleUnit: 'D',
+            limitCycleValue: undefined
+          },
+          resource: {
+            relaSourceType: '',//关联资源类型
+            relaSourceId: '',//关联资源ID
+            relaSourceName: '',//关联资源名称
+            custListType: '',//客户类型0.全部,1.特定客群,2.空客群
+            custListRelation: {
+              groupList: {},
+              groupType: '',
+            },
+            custList: '',
+            selectedCustList: null,
+            pictureList: [],//图片数组
+            sourceNum: undefined,//下发数量
+            jumpUrlSourceId: '',//跳转链接原始ID
+            jumpUrlName: '',//跳转链接原始名称
+            jumpUrl: '',//跳转链接
+            jumpUrlFile: {},//跳转类型位图文时的文件
+            jumpUrlType: 0,// 0.图文,1.活动,2.产品
+            localPicture: '',//图片地址
+            adPicture: '',//广告图片
+            adPictureFile: '',//封面图片文件
+            relaSignUp: 'true',//是否参与活动
+            resourceJumpFlag: '0',//资源跳转
+          },
+          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] || '';
+      },
+      shouldShowCard() {
+        return Array.isArray(this.reachShowOption) &&
+             this.reachShowOption.some(item => item.label === this.resourceNicheType);
+      }
+    },
+    methods: {
+      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 } = 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
+            });
+  
+          } 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;
+        }
+        console.log(this.form.resource.custListRelation,'this.form.resource.custListRelation')
+        const params = {
+          pkId: "",
+          resourceNicheId: this.form.resourceNicheId,
+          resourceNicheType:this.resourceNicheType,
+          channelType: this.channelType,
+          title: this.form.base.title,
+          priority: this.form.base.priority,
+          limitCycleFlag: this.form.reach.limitCycleFlag,
+          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,
+          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('请求失败，请稍后重试')error
+          console.log(error,'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,
+          limitCycleFlag: this.form.reach.limitCycleFlag,
+          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,
+          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('请求失败，请稍后重试')
+          console.log(error,'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 || ''
+        };
+        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)
+  
+        if (res.data && res.data.length > 0) {
+          this.uploadList = res.data.map(item => ({
+            ...item,
+            url: ''
+          }));
+        } else {
+          this.uploadList = [{
+            channelType: this.channelType,
+            pkId: null,
+            resourceNicheType: this.resourceNicheType,
+            size: '',
+            url: '',
+            customSize: ''
+          }];
+        }
+        return this.uploadList;
+      },
+      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
+        };
+      },
+      handleSizeInput(value, item) {
+        const cleaned = value.replace(/[^0-9x]/g, '');
+        item.customSize = cleaned;
+        const isValid = /^(\d+)x(\d+)$/i.test(cleaned);
+        if (!isValid && cleaned !== '') {
+          this.$message.error('尺寸格式错误，请输入类似：100x200');
+          this.isSizeValid = false;
+        } else {
+          this.isSizeValid = true;
+          item.size = cleaned; // 更新尺寸信息
+        }
+      }
+    },
+    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
+    }
+  };
+  </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>