axwen-test31 2.0.0

package/src/views/reach/resource-state/components/resourceformItem.vue

@@ -0,0 +1,325 @@
+<template>
+    <div class="child-container" @click="goToResourceList">
+        <div class="icon-container">
+            <img :src="image" alt="文件夹">
+            <i class="el-icon-delete" @click.stop="handleDelete"></i>
+        </div>
+        <div class="header">
+            <!-- :title="data.title" -->
+            <div class="header-title" >{{ data.title }}</div>
+            <div class="header-id">{{ data.identification }}</div>
+        </div>
+        <div class="head-resource">
+                <div :style="getResourceNicheTypeStyle()">{{ resourceNicheTypeName }}</div>
+                <div style="color:#999">{{ channelName }}</div>
+            </div>
+        <!-- <div class="content">
+            <div class="row">
+                <div class="item">
+                    <label>渠道名称</label>
+                    <span>{{ channelName }}</span>
+                </div>
+                <div class="item">
+                    <label>资源位类型</label>
+                    <span :style="getResourceNicheTypeStyle()">{{ resourceNicheTypeName }}</span>
+                </div>
+                <div class="item" v-show="showProductTotal">
+                    <label>资源位尺寸</label>
+                    <span>宽：{{ data.width }}px&emsp;高：{{ data.height }}px</span>
+                </div>
+                <div class="item" v-show="showProductTotal">
+                    <label>当前上架资源数</label>
+                    <span>{{  processedListingResourceTotal}}</span>
+                </div>
+                <div class="item" v-show="showProductTotal">
+                    <label>资源总数</label>
+                    <span>{{ processedResourceTotal }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="button-bottom">
+            <div class="left-button">
+                <el-button type="text" class="btn-edit" @click="open()">编辑</el-button>
+                <el-button type="text" class="btn-delete" @click="handleDelete">删除</el-button>
+                <resourcedetail ref="dialogRef" :state="state" :formData="data" />
+            </div>
+            <div class="right-button">
+                <el-button type="primary" icon="el-icon-s-unfold" @click="goToResourceList"
+                    v-show="showProductTotal">资源列表</el-button>
+            </div>
+        </div> -->
+    </div>
+</template>
+
+<script>
+import resourcedetail from '../components/resourcedetail.vue'
+import image from '../../../../icons/resource/icon.png'
+import { deleteResourceItem } from '@/api/reach'
+import { mapState } from 'vuex'
+export default {
+    components: { resourcedetail },
+    props: {
+        data: {
+            type: Object,
+            default: {}
+        }
+    },
+    data() {
+        return {
+            resourceNicheTypeName: '',
+            resourceTotal: '',
+            listingResourceTotal: '',
+            state: 'edit',
+            DICTS: {},
+            channelName: '',
+            productResource: '',
+            processedResourceTotal: null,
+            processedListingResourceTotal: null,
+            channelOptions: [],
+            resourceTypeOptions:[],
+            resourceNicheType:'',
+            image,
+        }
+    },
+    created() {
+        this.showTotal()
+        this.showTypeName()
+    },
+    mounted(){
+        this.getStyle()
+    },
+    methods: {
+        getResourceNicheTypeStyle() {
+            const styleMap = {
+                    '0': () => ({ color: '#1664FF', backgroundColor: '#F1F5FF' ,width:'50px', height:'20px','text-align':'center','line-height':'20px'}),
+                    '1': () => ({ color: '#00B42A', backgroundColor: '#EFFAF2',width:'32px', height:'20px','text-align':'center', 'line-height':'20px'}),
+                    '2': () => ({ color: 'orange', backgroundColor: '#FFF7EF', 'text-align':'center', width:'32px', height:'20px' ,'line-height':'20px'})
+                    };
+                    const { resourceNicheType } = this.data;
+                    this.resourceNicheType = resourceNicheType
+                    const matchedOption = this.resourceTypeOptions.find(
+                    option => option.value === resourceNicheType
+                    );
+                    if (matchedOption) {
+                    this.resourceNicheTypeName = matchedOption.label;
+                    const getStyle = styleMap[resourceNicheType];
+                    return getStyle ? getStyle() : { color: 'black' };
+                    }
+                    this.resourceNicheTypeName = resourceNicheType;
+                    return null;
+        },
+        async getStyle() {
+            const res = await this.$getOptionsForSystemParams(['resourcetype']);
+                if (res && Array.isArray(res) && res.length > 0) {
+                    this.resourceTypeOptions = res[0];
+                } else {
+                    this.resourceTypeOptions = [];
+                }
+        },
+        showTotal() {
+            const { resourceTotal, listingResourceTotal } = this.data
+            this.processedResourceTotal = resourceTotal === 0 || resourceTotal === '' ? '-' : resourceTotal;
+            // 处理列表资源总数
+            this.processedListingResourceTotal = listingResourceTotal === 0 || listingResourceTotal === '' ? '-' : listingResourceTotal;
+        },
+        showTypeName() {
+            const { channelType } = this.data;
+            this.$getOptionsForSystemParams(['resource_channel_type']).then(data => {
+                this.channelOptions = data[0]
+                const selectOption = this.channelOptions.find((item) => {
+                    return item.value === channelType
+                })
+                if (selectOption) {
+                    this.channelName = selectOption.label
+                }
+            })
+        },
+        open(val) {
+            if (val) {
+                this.state = 'detail'
+            } else {
+                this.state = 'edit'
+            }
+            this.$refs.dialogRef.openDialog()
+        },
+        goToResourceList() {
+                this.$router.push({
+                name: 'resourceList',
+                query: {
+                    resourceNicheId: this.data.pkId,
+                    resourceNicheType: this.data.resourceNicheType,
+                    // width: this.data.width,
+                    // height: this.data.height,
+                    // title:this.data.title,
+                    // titleCode:this.data.titleCode,
+                    // channelType:this.data.channelType,
+                    // processedListingResourceTotal:this.processedListingResourceTotal,
+                    // processedResourceTotal:this.processedResourceTotal
+                }
+            })
+        },
+        async handleDelete() {
+                try {
+                await this.$confirm('确定要删除该项吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+                });
+                const params = this.data.pkId;
+                await deleteResourceItem(params);
+
+                this.$parent.getResourceData();
+                this.$success('操作成功');
+
+            } catch (error) {
+                if (error === 'cancel') {
+                return;
+                }
+                // 删除失败
+                console.error('删除资源项失败', error);
+            }
+        },
+    },
+    computed: {
+        ...mapState(['config']),
+        showDelete() {
+            const { resourceTotal, listingResourceTotal, resourceNicheType } = this.data;
+            const RESOURCE_NICH_PRODUCT = this.config?.RESOURCE_NICH_PRODUCT;
+
+            const isEmpty = val => [null, undefined, '', 0].includes(val);
+            const areBothTotalsEmpty = isEmpty(resourceTotal) && isEmpty(listingResourceTotal);
+            const isNotProductType = resourceNicheType !== RESOURCE_NICH_PRODUCT;
+
+            return areBothTotalsEmpty || isNotProductType;
+        },
+        showProductTotal() {
+            const RESOURCE_NICH_PRODUCT = this.config?.RESOURCE_NICH_PRODUCT
+            const { resourceNicheType } = this.data;
+            if (resourceNicheType === RESOURCE_NICH_PRODUCT) {
+                return false
+            } else {
+                return true
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+.child-container {
+    border: 1px solid #E4E6E8;
+    border-radius: 3px;
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    min-height: 160px;
+    width: 100%; 
+    box-sizing: border-box; 
+}
+.child-container:hover {
+    border-color:#79A6FF;
+    cursor: pointer;
+}
+.icon-container {
+  display: flex;
+  align-items: center; 
+  position: relative; 
+}
+
+.icon-container img {
+  margin-right: auto; 
+  width: 40px;
+  height: 40px;
+}
+
+.icon-container i.el-icon-delete {
+  display: none; 
+  position: absolute;
+  right: 10px; 
+  width:16px;
+  height: 16px;
+  top: 20%; 
+  transform: translateY(-50%);
+  color: #AAB1B9;
+}
+
+.child-container:hover .icon-container i.el-icon-delete {
+  display: block; 
+  cursor: pointer;
+}
+
+.header-title{
+    width: 255px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 700;
+}
+.header {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 8px 0px;
+    min-height: 44px;
+    min-width: 255px;
+}
+
+.header-id {
+    font-size: 12px;
+    color: #BDBDBD;
+}
+.head-resource{
+    display: flex;
+    justify-content: space-between;
+}
+.content {
+    display: flex;
+    background-color: #f4f4f4;
+    flex-direction: column;
+    max-height: 200px;
+    overflow: auto;
+    margin: 0px 12px;
+}
+
+.row {
+    margin-left: 8px;
+    height: 145px;
+}
+
+.item {
+    display: flex;
+    justify-content: space-between;
+    margin-right: 8px;
+}
+
+.button-bottom {
+    display: flex;
+    justify-content: space-between;
+    margin: 12px;
+
+}
+
+.left-button {
+    display: flex;
+}
+
+.right-button {
+    display: flex;
+}
+
+.btn-edit {
+    border: 1px solid blue;
+    width: 40px;
+    height: 28px;
+    color: blue;
+}
+
+.btn-delete {
+    border: 1px solid red;
+    width: 40px;
+    height: 28px;
+    color: red;
+}
+</style>