opt_web/src/views/store-manage/online-merchandise/component/DataTableSlot.vue

<script lang="ts" setup>
/**
 * @Name: DataTableSlot.vue
 * @Description: 商品列表-单元格插槽
 * @Author: Cheney
 */

import { useCountryInfoStore } from '/@/stores/countryInfo';
import { getTagType } from '/@/utils/useTagColor';
import { Tickets } from '@element-plus/icons-vue';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import { useResponse } from '/@/utils/useResponse';
import * as api from '../api';


const router = useRouter();

const props = defineProps<{
  row: any,
  field: any
}>();
const { row, field } = props;

const countryInfoStore = useCountryInfoStore();
const country = countryInfoStore.Countries.find(c => c.code == row.country_code);
const color = country ? country.color : '#3875F6';
const region = countryInfoStore.Region.find(r => r.code == row.shop.region);

async function goto() {
  const query = {
    asin: row.asin,
    country_code: row.country_code
  }
  
  const res: any = await useResponse(api.getDetail, query )
  
  const routeUrl = router.resolve({
    path: '/product/comment',
    query: {
      asin: res.data[0].asin,
      title: res.data[0].title,
      img: res.data[0].img,
      url: res.data[0].url
    }
  });
  window.open(routeUrl.href, '_blank');
}
</script>

<template>
  <div class="font-medium">
    <div v-if="field === 'region'">
      <el-tag :disable-transitions="true" :type=getTagType(row.shop.region)>
        {{ region ? region.name : '-' }}
      </el-tag>
    </div>
    <div v-else-if="field === 'country_code'">
      <el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
        {{ country ? country.name : '-' }}
      </el-tag>
    </div>
    <div v-else-if="field === 'platform_number'">
      {{ row.shop.platform_number }}
    </div>
    <div v-else-if="field === 'shop_name'">
      {{ row.shop.name }}
    </div>
    <div v-else-if="field === 'fulfillment_channel'">
      <el-tag :disable-transitions="true" :type="row.fulfillment_channel === 'FBM' ? 'primary' : 'warning'">
        {{ row.fulfillment_channel }}
      </el-tag>
    </div>
    <div v-else-if="field === 'status'">
      <el-tag :disable-transitions="true"
              :type="row.status === 'Active' ? 'success' : row.status === 'Inactive' ? 'danger' : 'info'">
        {{ row.status === 'Active' ? '在售' : row.status === 'Inactive' ? '不在售' : '不完整' }}
      </el-tag>
    </div>
    <div v-else-if="field === 'operate'">
      <el-tooltip :enterable="false" :show-arrow="false" content="评论详情" hide-after="0"
                  placement="top" popper-class="custom-btn-tooltip">
        <PermissionButton circle plain type="success" @click="goto">
          <el-icon>
            <Tickets />
          </el-icon>
        </PermissionButton>
      </el-tooltip>
    </div>
    <!-- 动态获取 -->
    <div v-else>
      {{ row[field] }}
    </div>
  </div>
</template>

<style scoped>

</style>