yos_web/src/HDrpManagement/ProductMag/detail/index.vue

<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="mainData.itemname"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20220923140602"
        idname="itemid"
        ownertable="plm_item"
        tags=""
        :tabs="['详细信息','营销分类','商品等级价格']"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)"
        >
      <div slot="tags">
      </div>
      <div slot="customOperation" >
        <Edit class="inline-16" :data="mainData" @onSuccess="queryMainData" v-if="tool.checkAuth($route.name,'update') && mainData.status == '新建'"/>
        <customBtn 
          btnName="审核"
          message="确认审核当前商品吗?"
          idName="20220923153902"
          keyName="itemids"
          :id="[+$route.query.id]"
          :paramData="[{key:'status',value:1}]"
          @onSuccess="queryMainData($route.query.id)"
          class="inline-16"
          v-if="tool.checkAuth($route.name,'toExamine') && mainData.status == '新建'"
        />
        <customBtn 
          btnName="反审"
          message="确认反审当前商品吗?"
          idName="20220923153902"
          keyName="itemids"
          :id="[+$route.query.id]"
          :paramData="[{key:'status',value:0}]"
          @onSuccess="queryMainData($route.query.id)"
          class="inline-16"
          v-if="tool.checkAuth($route.name,'toExamine') && mainData.status == '审核'"
        />
        <customBtn 
          btnName="上架"
          message="确认上架当前商品吗?"
          idName="20220923154802"
          keyName="itemids"
          :id="[+$route.query.id]"
          :paramData="[{key:'isonsale',value:1}]"
          @onSuccess="queryMainData($route.query.id)"
          class="inline-16"
          v-if="tool.checkAuth($route.name,'isTop') && mainData.isonsale == 0 && mainData.status == '审核'"
        />
        <customBtn 
          btnName="下架"
          message="确认下架当前商品吗?"
          idName="20220923154802"
          keyName="itemids"
          :id="[+$route.query.id]"
          :paramData="[{key:'isonsale',value:0}]"
          @onSuccess="queryMainData($route.query.id)"
          class="inline-16"
          v-if="tool.checkAuth($route.name,'isBottom') && mainData.isonsale == 1"
        />
      </div>
      <div slot="slot0" >
        <detail_data :basic="mainData"></detail_data>
      </div>
      <div slot="slot1">
        <saleClass ref="saleClass" :data="mainData">
          <template v-slot:addClass="scope">
            <addClass v-if="tool.checkAuth($route.name,'salerClass') && mainData.status === '新建'" :data="scope.data" @onSuccess="$refs.saleClass.listData();queryMainData($route.query.id)"/>
          </template>
        </saleClass>
      </div>
      <div slot="slot2">
        <productPrice ></productPrice>
      </div>
    </basicDetails>
  </div>
</template>

<script>
import Edit from '../modules/edit'
import detail_data from './modules/detailedData'
import saleClass from '../modules/saleClass.vue'
import productPrice from '../modules/productPrice'
import addClass from '../modules/addClass'
export default {
  name: "index",
  data() {
    return {
      mainData:{},
      mainAreaData:{}
    }
  },
  components:{detail_data,saleClass,productPrice,addClass,Edit},
  methods: {
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id": 20220923155302,
        "content": {
          "itemid": id
        },
      })
      this.mainData = res.data
      this.changeDataStructure()
      console.log(this.mainData)
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex) {
      this.$router.replace({path:'/productmagDetail',query:{id:id,rowindex:rowindex}})
      this.queryMainData(id)
    },
    changeDataStructure(){
      let that = this
      this.mainAreaData = [
        {
          label:'产品名称',
          value:this.mainData.itemname
        },
        {
          label:'产品编号',
          value:this.mainData.itemno
        },
        {
          label:'型号',
          value:this.mainData.model
        },
        {
          label:'规格',
          value:this.mainData.spec
        },
        {
          label:'状态',
          value:this.mainData.status,
          style:function () {
            let style = {}
            switch (that.mainData.status) {
              case '审核':
                style = {color:"#52C41A"}
                break;
              case '新建':
                style = {color:"#000000"}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'计量单位',
          value:this.mainData.unitname
        },
        {
          label:'起订量',
          value:this.mainData.orderminqty
        },
        {
          label:'增量',
          value:this.mainData.orderaddqty
        },
        {
          label:'品号',
          value:this.mainData.erpitemno
        },
        {
          label:'品名',
          value:this.mainData.erpitemname
        },
        {
          label:'牌价',
          value:this.mainData.marketprice
        },
        {
          label:'领域',
          value:this.mainData.tradefield.map(item => item.tradefield).join(',')
        },
        /*{
          label:'上/下架',
          value:this.mainData.isonsale ? '上架' : '下架'
        },*/
        {
          label:'上/下架',
          value:this.mainData.isonsale ? '上架' : '下架',
          style:function () {
            let style = {}
            switch (that.mainData.isonsale) {
              case 1:
                style = {color:"#3874f6"}
                break;
              case 0:
                style = {color:"#333333"}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'是否工具',
          value:this.mainData.istool ? '是' : '否'
        },
      ]
    },
  },
  mounted() {
    this.queryMainData(this.$route.query.id)
  }
}
</script>

<style scoped>

</style>