axwen-test31 2.0.0

package/src/views/reach/resource-state/resourceNew copy.vue

@@ -0,0 +1,1361 @@
+<template>
+    <div class="form-all" v-loading="isLoading">
+        <div class="form-part">
+            <div class="basic-form">
+                <span class="title-text">基本信息</span>
+                <div class="form-content">
+                    <el-form ref="basicform" :model="basicform" :rules="isEditMode ? rules : {}" label-width="100px"  :readonly="isReadOnly">
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="标题：" prop="title" >
+                                    <el-input v-model="basicform.title" placeholder="请输入标题" style="width: 70%;"
+                                        :readonly="isReadOnly"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="优先级：" prop="priority">
+                                    <el-input v-model.number="basicform.priority" placeholder="请输入优先级"
+                                        style="width: 70%;" :readonly="isReadOnly"></el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="生效开始时间：" prop="startTime">
+                                    <el-date-picker type="datetime" placeholder="请设置开始时间" v-model="basicform.startTime"
+                                        format="yyyy-MM-dd HH:mm:ss" :readonly="isReadOnly"
+                                        style="width: 70%;"></el-date-picker>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="生效结束时间：" prop="endTime">
+                                    <el-date-picker type="datetime" placeholder="请设置结束时间" v-model="basicform.endTime"
+                                        format="yyyy-MM-dd HH:mm:ss" :readonly="isReadOnly"
+                                        style="width: 70%;"></el-date-picker>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="说明：" prop="dsc">
+                                    <el-input type="textarea" style="width: 70%;" placeholder="请输入说明"
+                                        v-model="basicform.dsc" :readonly="isReadOnly" maxlength="256"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12" v-if="this.showlistingList.length > 0">
+                                <el-form-item label="上架记录：" prop="log" v-show="state === 'detail'">
+                                    <div class="shelfLog" :title="formattedLog" :readonly="isReadOnly">
+                                        <div v-for="(item, index) in showlistingList" :key="index" class="log-item">
+                                            {{ item.crtTm }}
+                                            {{ item.listingStatus }}
+                                        </div>
+                                    </div>
+                                </el-form-item>
+                            </el-col>
+
+                            <el-col :span="12" v-else>
+                                <el-form-item label="上架记录：" prop="log" v-show="state === 'detail'">
+                                    <div class="shelfLogEmpty">暂无上架记录</div>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+            </div>
+            <div class="resource-item">
+                <span class="title-text">资源信息</span>
+                <div class="form-content">
+                    <el-form ref="resourceform" :model="resourceform" :rules="isEditMode ? resourcerules : {}"
+                        label-width="88px">
+                        <el-row>
+                            <el-col :span="24">
+                                <el-form-item :label="getLabel" prop="localPicture">
+                                    <div class="upload-container">
+                                        <span v-if="imageUrl && !isReadOnly" class="close-icon"
+                                            @click.stop="clearImage">×</span>
+                                        <el-button v-if="!isReadOnly" :disabled="isReadOnly" type="text"
+                                            class="upload-button" @click.prevent="showUploadConfirm"></el-button>
+                                        <el-upload class="avatar-uploader" :action="''" :show-file-list="false"
+                                            :disabled="isReadOnly">
+                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                                        </el-upload>
+                                    </div>
+                                </el-form-item>
+                                <span class="notify-upload">建议尺寸：750*1624，大小不超过2M，尺寸为png/jpg/jpeg</span>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="跳转活动：" prop="jumpUrlName" class="jump">
+                                    <!-- <el-button class="jumpButton" @click="showPop = true"
+                                    :disabled="isReadOnly"></el-button> -->
+                                    <!-- <input class="jumpUrlShow" v-model="resourceform.jumpUrlName" /> -->
+                                    <banner :visible.sync="showPop" @input="handleSelectDataID"
+                                    @confirm="handleSelectData" />
+                                    <el-input v-model="resourceform.jumpUrlName" placeholder="请输入跳转活动":disabled="isReadOnly" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <!-- <el-form-item label="参与客户：" prop="custListType">
+                                <el-radio-group v-model="resourceform.custListType" @input="selectSpecialGroup"
+                                    :disabled="isReadOnly">
+                                    <el-radio :label="0" style="margin-right: 10px;">全部</el-radio>
+                                    <el-radio :label="1">特定客群</el-radio>
+                                </el-radio-group>
+                            </el-form-item> -->
+                                <el-form-item label="参与客户：" prop="custListType">
+                                    <el-button-group v-model="resourceform.custListType" :disabled="isReadOnly">
+                                        <el-button v-for="item in DICTS" :key="item.value" :value="item.value" :disabled="isReadOnly"
+                                            @click="handleRadioChange(item.value)"
+                                            :type="resourceform.custListType === item.value ? 'primary' : 'default'">
+                                            {{ item.label }}
+                                        </el-button>
+                                    </el-button-group>
+                                </el-form-item>
+                                <groupList :visible.sync="groupVisible" @submit="submit" @cancel="cancel"
+                                    @update="groupListVisible"></groupList>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item v-show="this.selectCustomer" label="客群类型：">
+                                    {{ this.groupType }}
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item v-show="this.selectCustomer" label="客群名称：">
+                                    {{ this.groupList.name }}
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item v-show="resourceform.custListType === '2'"  prop="eventRelation" label="即时事件：">
+                                    <el-popover v-model:visible="popoverVisible" ref="popoverRef" placement="bottom-start" width="300" trigger="click" :disabled="isReadOnly">
+                                        <div class="tree-container">
+                                        <el-tree accordion :data="filteredEventTreeData" node-key="code"
+                                            :props="treeProps" :default-expand-all="true" :highlight-current="true"
+                                            :current-node-key="resourceform.eventCode" :expand-on-click-node="false"
+                                            @node-click="handleNodeClick" :disabled="isReadOnly"/>
+                                        </div>
+                                        <template #reference>
+                                            <el-input v-model="resourceform.eventRelation" placeholder="请选择事件名称"
+                                                clearable @clear="handleClear" @input="handleInput":disabled="isReadOnly" />
+                                        </template>
+                                    </el-popover>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+            </div>
+        </div>
+        <div class="bottom-button">
+            <el-button @click="cancelsubmit">取消</el-button>
+            <el-button type="primary" @click="submitForm('save')" :disabled="isReadOnly">保存</el-button>
+            <el-button type="primary" @click="submitForm('saveapproval')" :disabled="isReadOnly">保存并提交审批</el-button>
+        </div>
+
+        <el-dialog :visible.sync="dialogVisible" :title="getTitle" width="70%">
+            <el-table :data="resourceList" style="width: 100%" @row-click="handleRowClick"
+                :row-class-name="tableRowClassName" max-height="400">
+                <el-table-column label="选择" style="width: 10%">
+                    <template slot-scope="scope">
+                        <el-radio v-model="selectedRow" :label="scope.row.id">
+                            &nbsp;
+                        </el-radio>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="tempName" label="图片名称" style="width: 10%">
+                </el-table-column>
+                <el-table-column prop="imgType" label="图片类型" style="width: 10%">
+                    <template #default="scope">
+                        {{ imgTypeMap[scope.row.imgType] || '未知类型' }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="imgContent" label="图片" style="width: 10%">
+                    <template #default="scope">
+                        <!-- <img :src="getImgSrc(scope.row.imgContent)" alt="图片"
+                            style="max-width: 100%; max-height: 100px;"> -->
+                            <img class="hahaha" :src="getImgSrc(scope.row.imgContent)" alt="图片"
+                            style="max-width: 100%; max-height: 100px;">	
+                    </template>
+                </el-table-column>
+                <el-table-column prop="shareRange" label="共享范围" style="width: 10%">
+                    <template #default="scope">
+                        {{ shareRangeMap[scope.row.shareRange] || '' }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="crtByName" label="创建人" style="width: 10%">
+                    <template #default="scope">
+                        {{ scope.row.crtByName + '(' + scope.row.crtBy + ')' || '' }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="crtTm" label="创建时间" style="width: 10%">
+                </el-table-column>
+            </el-table>
+            <template #footer>
+                <span class="dialog-footer">
+                    <div class="pagination">
+                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                            @prev-click="lastPage" @next-click="nextPage" class="bottom-pagination"
+                            :current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
+                            layout="total, sizes, prev, pager, next, jumper" :total="total">
+                        </el-pagination>
+                    </div>
+                    <div class="popbutton">
+                        <el-button @click="dialogVisible = false">取消</el-button>
+                        <el-button type="primary" @click="confirmUpload">确定</el-button>
+                    </div>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { getImgs } from '@/api/template/template-picture'
+import { searchResourceNew, showResourceDetail, approvalResource, editResource } from '../../../api/reach';
+import { IMG_INTERFACE, IMG_REACH_INTERFACE } from '@/utils/variable'
+// import banner from '../resource-state/bannerjump'
+import groupList from '../resource-state/groupList'
+import { getSource } from '../../../api/reachsource';
+import { getAllNowEventList, getEventSearchChildList } from '../../../api/event'
+import dayjs from 'dayjs';
+import { cloneDeep } from 'lodash';
+export default {
+    components: { groupList },
+    data() {
+        const currentTime = dayjs()
+        return {
+            basicform: {
+                title: '',
+                priority: '',
+                startTime: null,
+                endTime: null,
+                dsc: '',
+            },
+            resourceform: {
+                localPicture: "",
+                adPictureFile: "",
+                jumpUrlSourceId: "",
+                jumpUrlFile: "",
+                jumpUrlType: 0,
+                libraryId: "",
+                custListType: null,
+                custList: "",
+                jumpUrl: '',
+                jumpUrlName: '',
+                eventCode: '',
+                eventRelation: '',
+                custListRelation: {
+                    groupList:{},
+                    groupType:'',
+                },
+            },
+            isDetailMode: false,
+            dialogVisible: false,//banner 弹窗图片
+            groupVisible: false,
+            // showPop: false,//banner跳转
+            selectedFile: null,
+            imageUrl: '',
+            imageShow: '',
+            image: '',
+            resourceList: [],
+            formattedLog: '',
+            selectedRowData: null,//选中数据
+            selectImgData: '',//选中图片地址
+            currentPage: 1, // 当前页码
+            pageSize: 5, // 每页显示数量
+            total: 0, // 总记录数,
+            isLoading: false,
+            selectedRow: null,
+            groupType: '',
+            filteredEventTreeData:[],
+            eventTreeData:[],
+            popoverVisible: false,
+            imgTypeMap: {
+                '1': '图片',
+                '2': '缩略图'
+            },
+            shareRangeMap: {
+                '0': '共享',
+                '1': '私有'
+            },
+            rules: {
+                title: [
+                    { required: true, message: '请输入活动名称'},
+                ],
+                priority: [
+                    { required: true, message: '请输入优先级' },
+                    {
+                        validator: (rule, value, callback) => {
+                            const reg = /^[1-9]\d{0,8}$/;
+                            if (!value) {
+                                return callback(new Error('请输入优先级'));
+                            }
+                            if (!reg.test(value)) {
+                                return callback(new Error('请输入 1 到 999999999 的正整数'));
+                            }
+                            callback();
+                        },
+                    }
+                ],
+                startTime: [
+                    { required: true, message: '请选择生效开始时间' },
+                    {
+                        validator: (rule, value, callback) => {
+                            const { endTime } = this.basicform;
+                            if (!value) {
+                                return callback();
+                            }
+                            if (dayjs(value).isBefore(currentTime)) {
+                                return callback(new Error('开始时间必须大于当前时间'));
+                            }
+                            if (endTime && dayjs(value).isAfter(endTime)) {
+                                return callback(new Error('开始时间必须小于结束时间'));
+                            }
+                            callback();
+                        }
+                    }
+                ],
+                endTime: [
+                    { required: true, message: '请选择生效结束时间' },
+                    {
+                        validator: (rule, value, callback) => {
+                            const { startTime } = this.basicform;
+                            if (!this.basicform.startTime || !value) {
+                                return callback();
+                            }
+                            if (startTime && dayjs(value).isBefore(startTime)) {
+                                return callback(new Error('结束时间必须大于开始时间'));
+                            }
+                            callback();
+                        }
+                    }
+                ]
+            },
+            resourcerules: {
+                localPicture: [
+                    { required: true, message: '请上传图片' }
+                ],
+                // jumpUrlName: [
+                //     { required: true, message: '请设置跳转活动', trigger: 'blur' }
+                // ],
+                custListType: [
+                    { required: true, message: '请选择参与客户' }
+                ],
+                eventRelation: [
+                    {
+                    validator: (rule, value, callback) => {
+                        if (this.resourceform.custListType === '2' && !value) {
+                        callback(new Error('请选择即时事件'));
+                        } else {
+                        callback();
+                        }
+                    }
+                    }
+                ]
+            },
+            resourceNicheId: '',
+            resourceNicheType: '',
+            H5DataID: '',
+            H5Item: '',
+            groupList: {
+                name:''
+            },
+            adPictureFile: null,
+            row: '',
+            state: '',
+            isReadOnly: false,
+            libraryId: '',
+            adStatus: null,
+            listingStatus: null,
+            originalData: {},
+            isEditMode: true,
+            showlistingList: [],
+            DICTS: {},
+            treeProps: {
+                label: 'name',
+                children: 'children',
+                disabled: 'disabled',
+            },
+            selectCustomer:false
+        }
+    },
+    computed: {
+        getLabel() {
+            if (this.resourceNicheType.includes('banner')) {
+                return 'banner封面：';
+            } else if (this.resourceNicheType.includes('pop')) {
+                return '弹窗封面：';
+            }
+            return '默认封面：';
+        },
+        getTitle() {
+            if (this.resourceNicheType.includes('banner')) {
+                return 'banner封面图';
+            } else if (this.resourceNicheType.includes('pop')) {
+                return '弹窗封面图';
+            }
+            return '默认封面图';
+        },
+        groupOtherParams() {
+            return { stat: '01', libId: undefined }
+        },
+    },
+    watch: {
+        '$route'(to, from) {
+            if (to.name === 'resourceNew') { // 确保是当前路由
+                this.initData(); // 重新初始化数据
+                this.handleAction(); // 重新执行操作
+            }
+        },
+        'resourceform.custListType': function(newVal) {
+            this.$refs['resourceform'].validateField('eventRelation');
+        }
+    },
+    created() {
+        this.initData();
+    },
+    mounted() {
+        this.handleAction();
+        console.log(this.pkId)
+    },
+    methods: {
+        initData() {
+            const query = this.$route.query;
+            this.resourceNicheId = query.resourceNicheId;
+            this.resourceNicheType = query.resourceNicheType;
+            this.pkId = query.pkId;
+            this.state = query.state;
+            this.imageShow = query.imageUrl || ''
+            this.$getOptionsForSystemParams('RESOURCE_PARTICIPATE').then(res => {
+                this.DICTS = res
+            })
+        },
+        //         async getBaseEventData(code) {
+        //             this.isLoading = true
+        //             this.eventTreeData = []
+        //             console.log('111')
+        //             try {
+        //                 // if (typeof code !== 'string' && typeof code !== 'number')
+        //                 // return
+        //                 const res = await getAllNowEventList()
+        //                 console.log(res,'resss')
+        //                 const eventName = res.data[0].eventName
+        //                 const eventCode = res.data[0].eventCode
+        //                 const params = {
+        //                     pageNum: 1,
+        //                     pageSize: 20,
+        //                     search: {
+        //                         parentEventCode: eventCode
+        //                     }
+        //                 }
+        //                 const response = await getEventSearchChildList(params)
+        //                 console.log(response.data.list,'0000')
+        //                 // if (res?.success) {
+        //                 // const rawData = res.data[code] || []
+        //                 // this.eventTreeData = Array.isArray(rawData) ? rawData : [rawData]
+        //                 // this.filteredEventTreeData = this.eventTreeData
+        //                 // }
+        //             }
+        //   catch (err) {
+        //     console.error('获取事件名称失败:', err)
+        //     this.eventNames = []
+        //     this.Form.eventName = null
+        //   }
+        //   finally {
+        //     this.isLoading = false
+        //   }
+        // },
+        async getBaseEventData() {
+            this.isLoading = true;
+            this.eventTreeData = [];
+            try {
+                const res = await getAllNowEventList();
+                if (!res?.success || !Array.isArray(res.data) || res.data.length === 0) return;
+                const parentEvents = res.data.map
+                    (item => ({
+                        name: item.eventName,
+                        code: item.eventCode,
+                        children: [],
+                        isParent:true
+                    }));
+
+                for (const parent of parentEvents) {
+                    const params = {
+                            pageNum: 1,
+                            pageSize: 20,
+                            search: {
+                                parentEventCode: parent.code,
+                                dataState:'1'
+                            }
+                        };
+                    const response = await getEventSearchChildList(params);
+                    if (response?.success && Array.isArray(response.data?.list)) {
+                        parent.children = response.data.list.map
+                            (child => ({
+                                name: child.eventName,
+                                code: child.eventCode
+                            }));
+                    }
+                }
+                this.filteredEventTreeData = this.eventTreeData = parentEvents;
+            } catch(err) {
+                console.error('获取事件失败:', err);
+                this.eventTreeData = [];
+            } finally {
+                this.isLoading = false;
+            }
+        },
+        handleNodeClick(data) {
+        if (data.disabled)
+            return
+        const isLeaf = !data.children || (Array.isArray(data.children) && data.children.length === 0)
+        if (data.isParent) {
+            return;
+        }
+        if (isLeaf) {
+            this.resourceform.eventCode = data.code
+            this.resourceform.eventRelation = data.name
+            this.popoverVisible = false;
+        }
+    },
+        handleClear() {
+            this.resourceform.eventCode = ''
+            this.filteredEventTreeData = this.eventTreeData
+        },
+        handleInput(value) {
+            if (!value) {
+                this.filteredEventTreeData = this.eventTreeData // 恢复全部
+                return
+            }
+            const keyword = value.toLowerCase()
+            this.filteredEventTreeData = this.filterTree(this.eventTreeData, keyword)
+        },
+        filterTree(nodes, keyword) {
+            return nodes
+                .map((node) => {
+                    const isParentNode = node.children?.length > 0
+                    const isSelfMatch = node.name.toLowerCase().includes(keyword)
+
+                    // 复制节点避免污染原数据
+                    const newNode = { ...node, disabled: isParentNode }
+
+                    // 如果是父节点且匹配，保留自身和所有子节点
+                    if (isParentNode && isSelfMatch) {
+                        return newNode // 保留完整子树
+                    }
+
+                    // 如果是父节点但自身不匹配，检查子节点
+                    if (isParentNode) {
+                        const filteredChildren = this.filterTree(node.children, keyword)
+                        if (filteredChildren.length > 0) {
+                            newNode.children = filteredChildren
+                            return newNode // 子节点有匹配则保留父节点
+                        }
+                        return null // 无匹配子节点时丢弃
+                    }
+
+                    // 叶子节点直接匹配
+                    return isSelfMatch ? newNode : null
+                })
+                .filter(Boolean)
+        },
+        handleAction() {
+            if (this.state === 'detail') {
+                this.isDetailMode = true;
+                this.isReadOnly = true;
+                const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+                // this.imageUrl = baseUrl + IMG_REACH_INTERFACE + this.imageShow;
+                this.image = this.imageUrl = this.imageShow
+                this.getDetail();
+            } else if (this.state === 'edit') {
+                const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+                // this.imageUrl = baseUrl + IMG_REACH_INTERFACE + this.imageShow;
+                // this.image = this.imageUrl
+                this.image = this.imageUrl = this.imageShow
+                this.getDetail();
+
+            } else if (this.state === 'copy') {
+                const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+                // this.imageUrl = baseUrl + IMG_REACH_INTERFACE + this.imageShow;
+                // this.image = this.imageUrl
+                this.image = this.imageUrl = this.imageShow
+                this.getCopyDetail();
+            }
+            if (!this.isDetailMode) {
+                this.$nextTick(() =>{
+                    this.$refs.basicform?.clearValidate(); // 编辑/新增时不提示错误
+                });
+            }
+        },
+        showUploadConfirm() {
+            this.dialogVisible = true;
+            this.getBannerList()
+        },
+        async getBannerList() {
+            const params = {
+                beginEndDate: null,
+                pageNum: this.currentPage,
+                pageSize: this.pageSize,
+                search: {
+                    scene: '01',
+                    tempStatus: '01'
+                },
+                searchOrg: '',
+                tempName: '',
+                tempStatus: '01'
+            }
+            try {
+                const response = await getImgs(params);
+                const data = response.data;
+                this.resourceList = data?.list || [];
+                this.total = data?.total || 0;
+            } catch (error) {
+                console.error('请求资源数据时出错:', error);
+            }
+        },
+        // async reachImage(path) {
+        //     const response = await getSource(path)
+        //     const url = URL.createObjectURL(response.data);
+        //     return url
+        // },
+        async getDetail() {
+            if (this.pkId) {
+                try {
+                    const res = await showResourceDetail(this.pkId)
+                    const { errorMsg, errorCode, data = {} } = res
+                    if (errorCode === '000000') {
+                        this.originalData = cloneDeep(data)
+                        // const localPicture = await this.reachImage(data.localPicture)
+                        // this.imageUrl = await this.reachImage(this.imageShow)
+                        this.listingStatus = data.listingStatus
+                        this.adStatus = data.adStatus
+                        this.basicform = {
+                            title: data.title,
+                            priority: data.priority,
+                            startTime: dayjs(data.startTime).toDate(), // 假设使用dayjs来处理日期
+                            endTime: dayjs(data.endTime).toDate(),
+                            dsc: data.dsc
+                        };
+                        if(data.custListRelation){
+                            var custListRelation = data.custListRelation 
+                        ? JSON.parse(data.custListRelation) 
+                        : null;
+                        const groupType = custListRelation?.groupType
+                        this.groupType = groupType
+                        }
+                        this.resourceform = {
+                            jumpUrlSourceId: data.jumpUrlSourceId,
+                            jumpUrl: data.jumpUrl,
+                            jumpUrlType: data.jumpUrlType,
+                            jumpUrlName: data.jumpUrlName,
+                            custListType: String(data.custListType),
+                            eventCode:data.eventCode,
+                            eventRelation:data.eventRelation,
+                            custListRelation:custListRelation,
+                            localPicture: data.localPicture
+                            // localPicture: `http://172.17.0.137:18000/imind-reach/fileCommon/download?path=${data.localPicture}`
+                        };
+                        this.image = this.imageUrl = this.resourceform.localPicture
+
+                        if(data.custListType === 1){
+                            this.selectCustomer = true
+                        }
+                        this.groupList = {
+                            libId: data.libraryId,
+                            pkId: data.custList,
+                            name:custListRelation?.groupList?.name
+                        };
+                        this.H5DataID = data.jumpUrlSourceId;
+                        // this.imageUrl = `http://172.17.0.137:18000/imind-reach/fileCommon/download?path=${data.localPicture}`
+                        // this.imageUrl = localPicture
+                        if (data?.listingLogList && data.listingLogList.length > 0) {
+                            const statusMap = {
+                                0: '下架',
+                                1: '上架'
+                            };
+                            this.showlistingList = data.listingLogList.map(item => ({
+                                listingStatus: statusMap[item.listingStatus] || '', // 映射状态
+                                crtTm: item.crtTm ? dayjs(item.crtTm).format('YYYY-MM-DD HH:mm:ss') : '--' // 格式化时间
+                            }));
+                        } else {
+                            this.showlisting = [];
+                    }
+                        this.getBaseEventData()
+                    } else {
+                        this.$message.error(errorMsg || '查询失败')
+                    }
+                } catch (error) {
+                    console.error('请求失败详情:', error);
+                    this.$message.error('请求失败，请稍后重试')
+                }
+            }
+        },
+        async getCopyDetail() {
+            try {
+                const res = await showResourceDetail(this.pkId)
+                const { errorMsg, errorCode, data = {} } = res
+                if (errorCode === '000000') {
+                    this.listingStatus = data.listingStatus
+                    this.adStatus = data.adStatus
+                    this.basicform = {
+                        title: data.title + '_copy',
+                        priority: data.priority,
+                        startTime: dayjs(data.startTime).toDate(), // 假设使用dayjs来处理日期
+                        endTime: dayjs(data.endTime).toDate(),
+                        dsc: data.dsc
+                    };
+                    if(data.custListRelation){
+                            var custListRelation = data.custListRelation 
+                        ? JSON.parse(data.custListRelation) 
+                        : null;
+                    const groupType = custListRelation?.groupType
+                    this.groupType = groupType
+                    }
+                    // const localPicture = await this.reachImage(data.localPicture)
+                    // this.imageUrl = await this.reachImage(this.imageShow)
+                    this.resourceform = {
+                        jumpUrlSourceId: data.jumpUrlSourceId,
+                        jumpUrl: data.jumpUrl,
+                        jumpUrlType: data.jumpUrlType,
+                        jumpUrlName: data.jumpUrlName,
+                        custListType: String(data.custListType),
+                        eventCode:data.eventCode,
+                        eventRelation:data.eventRelation,
+                        custListRelation:custListRelation,
+                        // localPicture: `http://172.17.0.137:18000/imind-reach/fileCommon/download?path=${data.localPicture}`
+                        // localPicture:localPicture
+                        localPicture: data.localPicture
+                    };
+                    this.image = this.imageUrl = this.resourceform.localPicture
+                    if(data.custListType === 1){
+                            this.selectCustomer = true
+                        }
+                        this.groupList = {
+                            libId: data.libraryId,
+                            pkId: data.custList,
+                            name:custListRelation?.groupList?.name
+                        };
+                    this.H5DataID = data.jumpUrlSourceId;
+                    // this.imageUrl = `http://172.17.0.137:18000/imind-reach/fileCommon/download?path=${data.localPicture}`
+                    // this.imageUrl = localPicture
+                    if (data?.listingLogList && data.listingLogList.length > 0) {
+                        const statusMap = {
+                            0: '下架',
+                            1: '上架'
+                        };
+                        this.showlistingList = data.listingLogList.map(item => ({
+                            listingStatus: statusMap[item.listingStatus] || '', // 映射状态
+                            crtTm: item.crtTm ? dayjs(item.crtTm).format('YYYY-MM-DD HH:mm:ss') : '--' // 格式化时间
+                        }));
+                    } else {
+                        this.showlisting = [];
+                    }
+                    this.pkId = ''
+                    this.getBaseEventData()
+                } else {
+                    this.$message.error(errorMsg || '查询失败')
+                }
+            } catch (error) {
+                console.error('请求失败详情:', error);
+                this.$message.error('请求失败，请稍后重试')
+            }
+        },
+        handleChange() {
+            const currentData = {
+                basicform: this.basicform,
+                resourceform: this.resourceform,
+                groupList: this.groupList,
+                H5DataID: this.H5DataID
+            };
+            return JSON.stringify(this.originalData) !== JSON.stringify(currentData);
+        },
+        confirmUpload() {
+            if (!this.selectedRowData) {
+                this.$message.error('请先选择一行');
+                return;
+            }
+            this.dialogVisible = false;
+            const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+            this.image = baseUrl + IMG_INTERFACE + this.selectImgData;
+            this.imageUrl = baseUrl + IMG_INTERFACE + this.selectImgData;
+            // this.imageUrl = 'http://172.17.0.137:18000' + IMG_INTERFACE + this.selectImgData;
+            this.resourceform.localPicture = IMG_INTERFACE + this.selectImgData;
+        },
+        handleRowClick(row) {
+            this.selectedRowData = row;
+            this.selectImgData = row.imgContent;
+            this.selectedRow = row.id
+            // this.state = 'pictChange'
+        },
+        tableRowClassName({ row }) {
+            if (this.selectedRowData && row === this.selectedRowData) {
+                return 'selected-row';
+            }
+            return '';
+        },
+        handleSizeChange(newSize) {
+            this.pageSize = newSize; // 更新每页显示数量
+            this.currentPage = 1; // 切换每页显示数量时，重置当前页码为1
+            this.getBannerList()
+        },
+        handleCurrentChange(newPage) {
+            this.currentPage = newPage; // 更新当前页码
+            this.getBannerList()
+
+        },
+        lastPage() {
+            if (this.currentPage > 1) {
+                this.currentPage--; // 上一页，页码减1
+                this.getBannerList()
+            }
+        },
+        nextPage() {
+            const totalPages = Math.ceil(this.total / this.pageSize);
+            if (this.currentPage < totalPages) {
+                this.currentPage++; // 下一页，页码加1
+                this.getBannerList()
+
+            }
+        },
+        getImgSrc(imgContent) {
+            return IMG_INTERFACE + imgContent;
+        },
+        clearImage() {
+            this.imageUrl = ''; // 清空图片路径
+            this.resourceform.localPicture = ''
+        },
+        // handleSelectData(val) {
+        //     this.H5Item = val
+        //     this.resourceform.jumpUrl = val[0].outLink || val[0].localLink
+        //     this.resourceform.jumpUrlName = val[0].tmplName || val[0].searchName
+        // },
+        handleSelectDataID(val, sel) {
+            this.H5DataID = val
+            this.resourceform.jumpUrlType = sel
+        },
+        cancelsubmit() {
+            this.$router.replace({
+                name: 'resourceList',
+                query: {
+                    resourceNicheId: this.resourceNicheId,
+                    resourceNicheType: this.resourceNicheType,
+                    __beforeClose: true
+                }
+            });
+        },
+        submitForm(button) {
+            if (!this.handleChange()) {
+                this.$message.info('没有检测到任何修改');
+                return;
+            }
+            let resourceformvalid = false
+            let basicformvalid = false
+            // 校验第一个表单
+            this.$refs['basicform'].validate((valid) => {
+                if (valid) {
+                    basicformvalid = true;
+                } else {
+                    this.$message.error('请检查基础表单的信息');
+                    return false;
+                }
+            });
+            // 校验第二个表单
+            this.$refs['resourceform'].validate((valid) => {
+                if (valid) {
+                    resourceformvalid = true;
+                } else {
+                    this.$message.error('请检查资源表单的信息');
+                    return false;
+                }
+            });
+            if(this.resourceform.custListType === '1' && ( this.groupList.name === '' || this.groupType === '')){
+                this.$message.error('请选择特定客群');
+                return 
+            }
+            // 确保所有表单都有效
+            if (basicformvalid && resourceformvalid && button === 'save') {
+                this.handleSave();
+            } else if (basicformvalid && resourceformvalid && button === 'saveapproval') {
+                this.handleSaveAndSubmit();
+            }
+        },
+        async handleSave() {
+            this.isLoading = true;
+            if (this.pkId) {
+                const params = {
+                    pkId: this.pkId,
+                    resourceNicheId: this.resourceNicheId,
+                    title: this.basicform.title,
+                    priority: this.basicform.priority,
+                    localPicture: this.image,
+                    jumpUrlSourceId: this.H5DataID,
+                    jumpUrl: this.resourceform.jumpUrl,
+                    jumpUrlType: this.resourceform.jumpUrlType,
+                    jumpUrlName: this.resourceform.jumpUrlName,
+                    libraryId: this.groupList.libId,
+                    custListType: this.resourceform.custListType,
+                    custList: this.groupList.pkId,
+                    custListRelation:JSON.stringify(this.resourceform.custListRelation),
+                    startTime: dayjs(this.basicform.startTime).format('YYYY-MM-DD HH:mm:ss'),
+                    endTime: dayjs(this.basicform.endTime).format('YYYY-MM-DD HH:mm:ss'),
+                    dsc: this.basicform.dsc,
+                    eventRelation:this.resourceform.eventRelation,
+                    eventCode:this.resourceform.eventCode
+                }
+                // console.log(params,'params')
+                try {
+                    const { errorMsg, errorCode } = await editResource(params)
+                    if (errorCode === '000000') {
+                        this.$message.success(errorMsg);
+                        this.$router.replace({
+                            name: 'resourceList',
+                            query: {
+                                resourceNicheId: this.resourceNicheId,
+                                resourceNicheType: this.resourceNicheType
+                            }
+                        });
+                    } else {
+                        this.$message.error(errorMsg || '保存失败')
+                    }
+                } catch (error) {
+                    this.$message.error('请求失败，请稍后重试')
+                } finally {
+                    this.isLoading = false;
+                }
+            } else {
+                const params = {
+                    pkId: "",
+                    resourceNicheId: this.resourceNicheId,
+                    title: this.basicform.title,
+                    priority: this.basicform.priority,
+                    localPicture: this.image,
+                    jumpUrlSourceId: this.H5DataID,
+                    jumpUrl: this.resourceform.jumpUrl,
+                    jumpUrlType: this.resourceform.jumpUrlType,
+                    jumpUrlName: this.resourceform.jumpUrlName,
+                    libraryId: this.groupList.libId,
+                    custListType: this.resourceform.custListType,
+                    custList: this.groupList.pkId,
+                    custListRelation:JSON.stringify(this.resourceform.custListRelation),
+                    startTime: dayjs(this.basicform.startTime).format('YYYY-MM-DD HH:mm:ss'),
+                    endTime: dayjs(this.basicform.endTime).format('YYYY-MM-DD HH:mm:ss'),
+                    dsc: this.basicform.dsc,
+                    eventRelation:this.resourceform.eventRelation,
+                    eventCode:this.resourceform.eventCode
+                }
+                try {
+                    const { errorMsg, errorCode } = await searchResourceNew(params)
+                    if (errorCode === '000000') {
+                        this.$message.success(errorMsg);
+                        this.$router.replace({
+                            name: 'resourceList',
+                            query: {
+                                resourceNicheId: this.resourceNicheId,
+                                resourceNicheType: this.resourceNicheType
+                            }
+                        });
+                    } else {
+                        this.$message.error(errorMsg || '保存失败')
+                    }
+                } catch (error) {
+                    this.$message.error('请求失败，请稍后重试')
+                } finally {
+                    this.isLoading = false;
+                }
+            }
+        },
+        async handleSaveAndSubmit() {
+            this.isLoading = true;
+            if (this.pkId) {
+                const params = {
+                    pkId: this.pkId,
+                    resourceNicheId: this.resourceNicheId,
+                    title: this.basicform.title,
+                    priority: this.basicform.priority,
+                    localPicture: this.image,
+                    jumpUrlSourceId: this.H5DataID,
+                    jumpUrl: this.resourceform.jumpUrl,
+                    jumpUrlType: this.resourceform.jumpUrlType,
+                    jumpUrlName: this.resourceform.jumpUrlName,
+                    libraryId: this.groupList.libId,
+                    custListType: this.resourceform.custListType,
+                    custList: this.groupList.pkId,
+                    custListRelation:JSON.stringify(this.resourceform.custListRelation),
+                    startTime: dayjs(this.basicform.startTime).format('YYYY-MM-DD HH:mm:ss'),
+                    endTime: dayjs(this.basicform.endTime).format('YYYY-MM-DD HH:mm:ss'),
+                    dsc: this.basicform.dsc,
+                    eventRelation:this.resourceform.eventRelation,
+                    eventCode:this.resourceform.eventCode
+                }
+                try {
+                    const { errorMsg, errorCode, data } = await editResource(params)
+                    if (errorCode === '000000') {
+                        const approvalResult = await approvalResource(data.pkId)
+                        const { errorCode: approvalCode, errorMsg: approvalMsg } = approvalResult;
+                        if (approvalCode === '000000') {
+                            this.$router.replace({
+                                name: 'resourceList',
+                                query: {
+                                    resourceNicheId: this.resourceNicheId,
+                                    resourceNicheType: this.resourceNicheType
+                                }
+                            });
+                            this.restForm()
+                            this.$message.success(approvalMsg);
+                        } else {
+                            this.$message.error(approvalMsg || '保存失败')
+                        }
+                    } else {
+                        this.$message.error(errorMsg || '保存失败')
+                    }
+                } catch (error) {
+                    this.$message.error('请求失败，请稍后重试')
+                } finally {
+                    this.isLoading = false;
+                }
+            } else {
+                const params = {
+                    pkId: "",
+                    resourceNicheId: this.resourceNicheId,
+                    title: this.basicform.title,
+                    priority: this.basicform.priority,
+                    localPicture: this.image,
+                    jumpUrlSourceId: this.H5DataID,
+                    jumpUrl: this.resourceform.jumpUrl,
+                    jumpUrlName: this.resourceform.jumpUrlName,
+                    jumpUrlType: this.resourceform.jumpUrlType,
+                    libraryId: this.groupList.libId,
+                    custListType: this.resourceform.custListType,
+                    custList: this.groupList.pkId,
+                    custListRelation:JSON.stringify(this.resourceform.custListRelation),
+                    startTime: dayjs(this.basicform.startTime).format('YYYY-MM-DD HH:mm:ss'),
+                    endTime: dayjs(this.basicform.endTime).format('YYYY-MM-DD HH:mm:ss'),
+                    dsc: this.basicform.dsc,
+                    eventRelation:this.resourceform.eventRelation,
+                    eventCode:this.resourceform.eventCode
+                }
+                try {
+                    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: 'resourceList',
+                                query: {
+                                    resourceNicheId: this.resourceNicheId,
+                                    resourceNicheType: this.resourceNicheType
+                                }
+                            });
+                            this.restForm()
+                            this.$message.success(approvalMsg);
+                        } else {
+                            this.$message.error(approvalMsg || '保存失败')
+                        }
+                    } else {
+                        this.$message.error(errorMsg || '保存失败')
+                    }
+                } catch (error) {
+                    this.$message.error('请求失败，请稍后重试')
+                } finally {
+                    this.isLoading = false;
+                }
+            }
+        },
+        handleRadioChange(value) {
+            this.resourceform.custListType = value;
+            this.selectSpecialGroup()
+        },
+        selectSpecialGroup() {
+            if (this.resourceform.custListType === '0') {
+                this.groupVisible = false;
+                this.selectCustomer = false
+                this.resourceform.eventRelation = '';
+                this.resourceform.eventCode = '';
+                this.groupType = ''
+                this.groupList.name = ''
+                this.resourceform.custListRelation = {}
+            } else if (this.resourceform.custListType === '1') {
+                this.groupVisible = true;
+                this.resourceform.eventRelation = '';
+                this.resourceform.eventCode = '';
+            } else if (this.resourceform.custListType === '2') {
+                this.groupVisible = false;
+                this.selectCustomer = false
+                this.groupType = ''
+                this.groupList.name = ''
+                this.resourceform.custListRelation = {}
+                this.getBaseEventData()
+            }
+        },
+        submit(type, params) {
+            const map = {
+                groupStatic: '静态客群',
+                groupDynamic: '动态客群',
+                groupAssembly: '组合客群',
+                commonTable: '流转客群',
+                groupEvent: '事件客群'
+            }
+            this.groupType = map[type]
+            this.resourceform.custListRelation = this.resourceform.custListRelation || {
+                    groupList: {
+                        name:''
+                    },
+                    groupType: ''
+                    };
+            this.resourceform.custListRelation.groupType = this.groupType;
+            this.groupList = params
+            this.resourceform.custListRelation.groupList = this.resourceform.custListRelation.groupList || {};
+            this.resourceform.custListRelation.groupList.name = this.groupList.name;
+        },
+        restForm() {
+            this.basicform = {
+                title: '',
+                priority: '',
+                startTime: null,
+                endTime: null,
+                dsc: '',
+            };
+            this.resourceform = {
+                localPicture: "",
+                adPictureFile: "",
+                jumpUrlSourceId: "",
+                jumpUrlFile: "",
+                jumpUrlType: 0,
+                libraryId: "",
+                custListType: null,
+                custListRelation: {
+                    groupList:{},
+                    groupType:'',
+                },
+                custList: "",
+                jumpUrl: '',
+                jumpUrlName: '',
+                eventCode:'',
+                eventRelation:'',
+            };
+            this.adPictureFile = null;
+            this.groupList = {
+                 name:''
+            };
+            this.imageUrl = ''
+        },
+        cancel(visible) {
+            this.groupVisible = visible
+            // this.resourceform.custListType = null;
+        },
+        groupListVisible(visible) {
+            this.selectCustomer = true
+            this.groupVisible = visible
+        },
+    }
+}
+
+</script>
+<style scoped>
+.form-all {
+    padding: 32px 24px;
+    position: relative;
+    height: 87vh;
+    overflow: auto;
+}
+
+.form-part {
+    height: 100%;
+    overflow-y: auto;
+}
+
+.title-text {
+    font-size: 24px;
+    border-left: 3px solid #1664FF;
+    padding-left: 10px;
+}
+
+.form-content {
+    padding: 20px 10px;
+}
+
+.resource-item {
+    padding: 20px 10px;
+}
+
+.jump {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+.jumpButton {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 80%;
+    height: 100%;
+    opacity: 0;
+    z-index: 2;
+    background-color: transparent;
+}
+
+.jumpUrlShow {
+    width: 80%;
+    padding-right: 30px;
+    cursor: pointer;
+    border-radius: 3px;
+    border: 1px solid #DCDFE6;
+    height: 30px;
+    background-color: transparent;
+}
+
+.shelfLog {
+    width: 70%;
+    height: 100px;
+    background-color: #f5f7fa;
+    border: 1px solid #dcdfe6;
+    border-radius: 3px;
+    min-height: 30px;
+    overflow-y: auto;
+}
+
+.shelfLogEmpty {
+    width: 70%;
+    height: 34px;
+    background-color: #f5f7fa;
+    border: 1px solid #dcdfe6;
+    border-radius: 3px;
+    min-height: 30px;
+    overflow-y: auto;
+}
+
+.avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+}
+
+.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 173px;
+    height: 80x;
+    line-height: 156px;
+    text-align: center;
+    /* border:1px solid #DCDFE6; */
+    /* border-radius: 3px; */
+}
+
+.avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+}
+
+.notify-upload {
+    color: #DCDFE6;
+    margin-left: 90px;
+}
+
+.bottom-button {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.el-dialog {
+    width: 54%;
+    height: auto;
+    position: relative;
+}
+.tree-container {
+  max-height: 300px;
+  min-height: 300px;
+   /* 设置你希望的最大高度 */
+  overflow-y: auto;
+}
+.pagination {
+    left: 0;
+    margin-bottom: 10px;
+}
+
+.popbutton {
+    margin-left: 10px;
+}
+
+.picture {
+    display: flex;
+    flex-direction: column;
+}
+
+.upload-container {
+    position: relative;
+    display: inline-block;
+}
+
+.upload-button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    /* 让按钮透明 */
+    z-index: 10;
+    /* 确保按钮在最上层 */
+    cursor: pointer;
+}
+
+.avatar-uploader {
+    width: 178px;
+    height: 178px;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.close-icon {
+    position: absolute;
+    top: 5px;
+    /* 距离顶部的距离 */
+    right: 5px;
+    /* 距离右侧的距离 */
+    font-size: 18px;
+    color: #fff;
+    /* 图标颜色 */
+    background-color: rgba(0, 0, 0, 0.5);
+    /* 半透明背景 */
+    border-radius: 50%;
+    /* 圆形样式 */
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    cursor: pointer;
+    z-index: 20;
+    /* 确保图标在最上层 */
+}
+
+/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
+    background-color: transparent !important;
+}
+
+/deep/ .el-table .el-table__body .el-table__row.selected-row,
+/deep/ .el-table .el-table__body .el-table__row.selected-row:hover {
+    background-color: #f5f7fa !important;
+    /* 浅灰色背景 */
+}
+/deep/ .el-popover__content {
+  padding: 0;
+  max-height: none !important;
+}
+.hahaha{
+    height: 30px;
+}
+</style>