yos_web/src/HManagement/marketing2/salerScope/index.vue

<template>
  <div class="flex">
    <!-- 营销区域列表 -->
    <areaTree ref="arealist" style="width:250px;flex:0 1 auto" @onClick="onClick">
      <template v-slot:operation="data">
        <!-- 新增区域 -->
        <addArea v-if="tool.checkAuth($route.name,'addArea')" class="inline-16" :data="data.data" @onSuccess="onSuccess"></addArea>
        <el-dropdown>
          <span class="el-dropdown-link"><i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <editArea v-if="tool.checkAuth($route.name,'updateArea')" class="inline-16" :data="data.data" @editSuccess="editSuccess"></editArea>
            </el-dropdown-item>
            <el-dropdown-item>
              <delArea  v-if="tool.checkAuth($route.name,'deleteArea')" class="inline-16" :data="data.data" @onSuccess="onSuccess"></delArea>
            </el-dropdown-item>
            <el-dropdown-item >
              <startArea v-if="tool.checkAuth($route.name,'startArea')" class="inline-16" :data="areaInfo" @onStartArea="onStartArea"></startArea>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </areaTree>
    <div class="hm-info-panel">
      <basicLayout 
        ref="basicLayout" 
        formPath="marketing2/salerScope"
        tableName="saleScopeTable" 
        idName="sa_salearea_salescopeid" 
        :apiId="{query:20221011144503,del:20221011144403}"
        :autoQuery="false"
        :options="options">
        <div slot="custom"></div>
        <template v-slot:tbList="scope">
<!--          {{scope.data.column.columnname}}-->
          <div v-if="scope.data.column.columnname === 'isused' ">
            <p v-if="scope.data.column.columnname.data === 1">启用</p>
            <p v-else-if="scope.data.column.columnname.data === 0">停用</p>
            <p v-else>--</p>
          </div>
          <div v-else>
            {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
          </div>
        </template>
        <template v-slot:tbOpreation="scope">
        </template>
      </basicLayout>
    </div>
  </div>
</template>

<script>
import areaTree from './area/list'
import addArea from './area/modules/add_area'
import editArea from './area/modules/edit_area'
import startArea from './area/modules/start_area'
import delArea from './area/modules/del_area'

export default {
  components:{
    areaTree,
    addArea,
    editArea,
    delArea,
    startArea,
  },
  data () {
    return {
      options:[],
      areaInfo:{}
    }
  },
  methods:{
    onClick (data) {
      this.areaInfo = data
      this.$refs['basicLayout'].param.content.sa_saleareaid = data.sa_saleareaid
      this.$refs['basicLayout'].listData()
      this.$store.dispatch('sendDataToForm',data)
    },
    onSuccess () {
      this.$refs.arealist.query_arealist()
    },
    onScopeSuccess () {
      this.$refs.salescope.query_areascope(this.areaInfo.sa_saleareaid)
    },
    editSuccess (form) {
      this.$refs.arealist.query_arealist(()=>{
        this.areaInfo = form
        this.$emit('onClick',this.areaInfo)
        this.$refs['arealist'].setCurrentKey(this.areaInfo.sa_saleareaid)
      })
    },
    onStartArea (status) {
      status === 1?this.areaInfo.isused = 0:this.areaInfo.isused = 1
    }
  }
}

</script>
<style>
</style>
<style scoped>
.flex{
  display: flex;
}
.hm-info-panel{
  flex:1;
  width:500px;
  height:calc(100vh - 100px);
  overflow-y:scroll
}
</style>