yos_web/src/HDrpManagement/ProductMag/index.vue

<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      :oldFormPath="{
        add:'HDrpManagement/ProductMag/modules'
      }"
      tableName="productManageTable" 
      idName="itemid"
      ownertable="plm_item"
      :apiId="{query:20220923140602,del:20220923152202}"
      :options="options"
      >
      <div slot="custom">
        <label  class="search__label" style="margin: auto;width: 70px;">是否上架:</label>
        <el-select class="inline-24" v-model="selectParam.isonsale" placeholder="请选择是否上架" @change="selectChange" size="small" clearable>
          <el-option
              v-for="item in isOnSaleData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <label  class="search__label" style="margin: auto;width: 40px;">状态:</label>
        <el-select class="inline-24" v-model="selectParam.status" placeholder="请选择状态" @change="selectChange" size="small" clearable>
          <el-option
              v-for="item in statusData"
              :key="item.value"
              :label="item.value"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <template v-slot:tbList="scope">
        <div>
        <p :style="scope.data.column.data.isonsale === 1?'color:#52c41a':'color:red'" v-if="scope.data.column.columnname === 'isonsale'">
<!--          {{scope.data.column.data.isonsale === 1?'上架中':'已下架'}}-->
          <el-switch
            v-model="scope.data.column.data.isonsale"
            :active-value='1'
            :inactive-value='0'
            @change="isOnSaleChange(scope.data.column.data)">
          </el-switch>
        </p>
        <p v-else-if="scope.data.column.columnname === 'cover'">
          <previewImage v-if="scope.data.column.data.attinfos[0]"  style="width:80px;height:80px;margin-top:0px" class="image" :image="scope.data.column.data.attinfos[0]" :list="scope.data.column.data.attinfos" :deletebtn="false"></previewImage>
        </p>
        <p v-else>{{scope.data.column.data[[scope.data.column.columnname]]}}</p>
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
        <editTemp :data="scope.data.data"></editTemp>
      </template>
    </basicLayout>
  </div>
</template>

<script>
/**
 * @basicLayout 提供this.$ref['basicLayout'].listData()方法查询列表信息
 * @param {string} formPath 新建,编辑组件所在文件夹名称,以后所有列表新增修改文件统一放入Form文件夹下面,并创建与开发应用相同的名称的子文件夹
 * @param {string} tableName 开发端配置的表格名称
 * @param {String} idName 数据主id名称
 * @param {object} apiId:{query:查询的接口id,del:删除的接口id} 
 * @param {Array} options:{label:描述,value:值} 
 */
import previewImage from '@/components/previewImage/index'
import editTemp from './modules/edit.vue'

export default {
  data () {
    return {
      options:[],
      isOnSaleData:[
        {
          value:0,
          label:'否'
        },
        {
          value:1,
          label:'是'
        }
      ],
      statusData:[
        {
          value:'新建',
          label:'新建'
        },
        {
          value:'审核',
          label:'审核'
        }
      ],
      selectParam:{
        isonsale:'',
        status:''
      }
    }
  },
  components:{
    previewImage,
    editTemp
  },
  methods:{
    async isOnSaleChange(val){
      console.log("更改状态",val.isonsale)
      console.log(val)
      const res = await this.$api.requested({
        "id": 20220923154802,
        "content": {
          "itemids": [val.itemid],
          "isonsale": val.isonsale//0：下架，1：上架
        },
      })
      this.tool.showMessage(res,()=>{
        this.$refs.basicLayout.listData()
      })
    },
    selectChange(){
      this.$refs.basicLayout.param.content.where = this.selectParam
      this.$refs.basicLayout.listData()
    }
  }
}

</script>
<style>
</style>