yos_web/src/HDrpManagement/contractModel/index.vue

<template>
  <div>
    <basicLayout
      ref="list"
      formPath="contractModel"
      tableName="contractModelTable"
      idName="sa_contract_template_clauseids"
      :apiId="{query:20221128164602,del:20221125195702}"
      :options="options"
      @listData="listdata"
      :hideSearch="true">
      <div slot="custom" style="display:flex">
        <!-- <div class="label_center">
          <p class="search__label">{{$t('范围')}}:</p>
          <el-select
            class="inline-16"
            size="small"
            v-model="area"
            :placeholder="$t('请选择范围')"
            clearable
            @change="$refs.list.param.content.type=area;$refs.list.listData()"
          >
            <el-option
              v-for="item in areaList"
              :key="item.remarks"
              :label="$t(item.value)"
              :value="item.remarks"
            ></el-option>
          </el-select>
        </div> -->
      </div>

      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.data[[scope.data.column.columnname]] == '项目'">
          <span v-if="scope.data.column.data.typemx == '直销'">{{$t(`直销项目协议`)}}</span>
          <span v-else-if="scope.data.column.data.typemx == '经销'">{{$t(`经销项目协议`)}}</span>
        </div>
        <div v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '框架'">
          {{$t(`经销商合作协议`)}}
        </div>
        <div v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '工具借用'">
          {{$t(`工具借用协议`)}}
        </div>
        <div v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '居间'">
          {{$t(`居间协议`)}}
        </div>
        <div v-else>
          {{$t(scope.data.column.data[[scope.data.column.columnname]])}}
        </div>
        <div v-if="!scope.data.column.data[[scope.data.column.columnname]] && scope.data.column.columnname != 'count'">--</div>
      </template>
      <template v-slot:tbOpreation="scope">
        <el-button type="text" size="mini" @click="detailBtn(scope.data.data)">{{$t('详 情')}}</el-button>
      </template>
    </basicLayout>

    <!--抽屉面板-->
    <el-drawer
      :title="$t(`我是标题`)"
      :visible.sync="drawer"
      :with-header="false"
      direction="rtl"
      size="80%"
      append-to-body
      @close="closeDrawer">
      <div class="detail__panel">
        <router-view/>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data () {
    return {
      options:[],
      drawer:false
    }
  },
  created () {

  },
  watch: {
    $route (val) {
      if (val.path == '/contract_model') {
        this.$refs.list.listData()
      }
    },
    DrawerShow (val) {
      val ? this.drawer = true : this.drawer = false
    }
  },
  computed: {
    ...mapGetters({
      DrawerShow:'DrawerShow'
    })
  },
  methods:{
    closeDrawer () {
      this.$router.push('/contract_model')
      this.$store.dispatch('DrawerShowChange',false)
    },
    listdata(data) {

    },
    detailBtn (data) {
      this.$store.dispatch('DrawerShowChange',true)
      this.$router.push({
        path:'/contractModelDetail',
        query:{
          type:data.type=='项目'
            ? data.typemx=='直销'
              ? '1' : '2'
          : data.type == '框架'
            ? '3' : data.type == '居间' ? '4' : '5',
        }
      })
    }
  }
}

</script>
<style scoped>
</style>