goldenPig/src/views/AuthMana/SellAuth.vue

<template>
  <div>
    <search-cpn
      v-bind="searchConfig"
      @handleSearch="handleSearchEvent"
      @clearEvent="handleClearEvent"
    >
      <!-- 位置 -->
      <template #location="scope">
        <el-cascader
          :options="options"
          v-model="searchForm2.location"
          :props="{ checkStrictly: true }"
          :placeholder="scope.item.placeholder"
          style="width: 100%"
          clearable
        >
        </el-cascader>
      </template>
    </search-cpn>
    <br/>
    <new-table :title="'牧场列表'" :list-data="tableData" :table-items="tableItems" :shows="showsItems">
      <template #location="scope">
        <span v-location="{ data: scope.row.location }"></span>
      </template>
      <template #sellStatus="scope">
        <el-switch v-model="scope.row.sellStatus" @change="setSellStatus(scope.row, $event)"></el-switch>
      </template>
    </new-table>
  </div>
</template>

<script>
import SearchCpn from "../../components/search-cpn/SearchCpn";
import NewTable from "../../components/newTable/NewTable";
import { regionData } from "element-china-area-data";
import { baseFarmList, baseFarmEdit } from "../../utils/apis/basic-data/archivesAdmin";

export default {
  name: "SellAuth",
  components: {
    SearchCpn,
    NewTable
  },
  data() {
    return {
      searchConfig: {},
      searchForm1: {
        farmName: undefined,
        type: 2,
      },
      searchForm2: {
        location: [],
      },
      formItemProp: [
        {
          label: '名称：',
          type: 'input',
          field: 'farmName',
          placeholder: '请输入名称',
        },
        {
          label: '位置：',
          type: 'custom',
          field: 'location',
          slotName: 'location',
          placeholder: '请选择位置'
        },
      ],
      options: regionData,
      searchForm: {
        farmName: undefined,
        type: 2,
        location: undefined,
      },
      pageNo: 1,
      pageSize: 20,
      tableData: [],
      tableItems: [
        {
          prop: 'farmName',
          label: "牧场名称",
          slotName: 'farmName'
        },
        {
          prop: 'location',
          label: "牧场位置",
          slotName: 'location'
        },
        {
          prop: 'sellStatus',
          label: '是否禁用售猪',
          slotName: 'sellStatus'
        }
      ],
      showsItems: {
        // showSelect: true
      },
    }
  },
  created() {
    this.searchConfig =  { formItemProp: this.formItemProp, searchForm: this.searchForm1 };
  },
  methods: {
    handleSearchEvent(value) {
      this.searchForm = {
        ...value,
        location: this.searchForm2.location.join(","),
      }
      this.initBaseFarm()
    },
    handleClearEvent() {
      this.searchForm2.location = [];
    },
    initBaseFarm() {
      let params = {
        current: this.pageNo,
        size: this.pageSize,
        ...this.searchForm
      }
      baseFarmList(params).then(res => {
        if(res.code === 10000) {
          this.tableData = res.data.records
        }
      })
    },
    setSellStatus(data, e) {
      console.log(data, e)
      let params = {
        sellStatus: e,
        id: data.id
      }
      baseFarmEdit(params).then(res => {
        console.log(res)
        if(res.code === 10000) {
          this.$message.success('修改成功!')
        } else {
          this.$message.error('修改失败')
        }
      })
    }
  },
  mounted() {
    this.initBaseFarm()
  }
}
</script>

<style scoped>

</style>