epmet-oper-pc-chengyang/epmet-oper-web/src/views/modules/customer/customize/menuCustomer.vue

<template>
  <div>

    <div class="mod-sys__menu">
      <div class="div_btn">
        <span style="margin-right:10px">{{customerName}}</span>
        <el-button type="default"
                   @click="diaCancel">取消返回</el-button>
        <!-- <el-button class=""
                   type="primary"
                   @click="addShow()">{{"新增" }}</el-button> -->
        <!-- <el-input v-model="search"
                  placeholder="请输入内容"></el-input> -->
      </div>
      <div class="div_btn">
        <el-button class=""
                   type="primary"
                   @click="useMenu()">开启</el-button>
        <el-button class=""
                   type="primary"
                   @click="closeMenu()">关闭</el-button>
      </div>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                row-key="id"
                border
                style="width: 100%;"
                @select-all="selectAll"
                @selection-change="handelSelection">
        <el-table-column
            type="selection"
            fixed="left"
            align="center"
            width="50"
        />

        <el-table-column prop="name"
                         :label="$t('menu.name')"
                         header-align="center"
                         min-width="150"></el-table-column>
        <el-table-column prop="icon"
                         :label="$t('menu.icon')"
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <svg class="icon-svg"
                 aria-hidden="true">
              <use :xlink:href="`#${scope.row.icon}`"></use>
            </svg>
          </template>
        </el-table-column>

        <el-table-column prop="sort"
                         :label="$t('menu.sort')"
                         header-align="center"
                         align="center"></el-table-column>
                <el-table-column prop="useFlag"
                         :label="$t('menu.status')"
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.useFlag === '0'"
                    size="small">{{ $t('menu.status0') }}</el-tag>
            <el-tag v-else
                    size="small"
                    type="info">{{ $t('menu.status1') }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center"
                         width="150">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button v-if="scope.row.useFlag === '0'"
                       type="text"
                       size="small"
                       @click="useUpdate(scope.row.id,'1')">开启</el-button>
            <el-button v-if="scope.row.useFlag === '1'"
                       type="text"
                       size="small"
                       @click="useUpdate(scope.row.id,'0')">关闭</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible"
                     ref="addOrUpdate"
                     @refreshDataList="getDataList"></add-or-update>
    </div>


  </div>
</template>

<script>

import { requestPost } from '@/js/dai/request'
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './menu-customer-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      customerId: '', // 客户id，父组件传
      customerName: '', // 客户名称，父组件传

      tableParams: {
        customerId: ''
      },
      search: '',
      dataList: [],
      selection: [],
      selAllFlag: false,

      dataListLoading: false,

      mixinViewModuleOptions: {
        getDataListURL: '/gov/access/menu/customerMenuList'
      }

    }
  },

  computed: {
  },
  components: {
    AddOrUpdate
  },
  created() {

  },
  methods: {

    useMenu(){
      let ids = this.selection.map((item) => item.id);
      this.$http
          .post('/gov/access/govMenuCustomerRelation/useUpdate', {
            ids: ids,
            use: '1'
          })
          .then(({ data: res }) => {
            return this.$message.success("操作成功");
          })
      this.query();
    },
    closeMenu(){
      let ids = this.selection.map((item) => item.id);
      this.$http
          .post('/gov/access/govMenuCustomerRelation/useUpdate', {
            ids: ids,
            use: '0'
          })
          .then(({ data: res }) => {
            return this.$message.success("操作成功");

          })
      this.query();
    },
    useUpdate(id,use){
      this.$http
          .post('/gov/access/govMenuCustomerRelation/useUpdate', {
            ids: [id],
            use: use
          })
          .then(({ data: res }) => {
            return this.$message.success("操作成功");
          })
      this.query();
    },
    query() {

      this.dataListLoading = true
      this.$http
          .post('/gov/access/menu/customerMenuList', {
            customerId: this.customerId,
            tableName: 'gov_menu'
          })
          .then(({ data: res }) => {
            this.dataListLoading = false
            if (res.code !== 0) {
              this.dataList = []
              this.total = 0
              return this.$message.error(res.msg)
            }
            this.dataList = res.data
          })
          .catch(() => {
            this.dataListLoading = false
          })
    },

    initData (customerId, customerName) {
      this.customerId = customerId
      this.customerName = customerName
      // if (this.mixinViewModuleOptions.createdIsNeed) {
      //   console.log(this.customerId+"22222");
        this.query()
      // }

    },

    selectAll(selection) {
      this.selection = selection;
      if (selection.length > 0) {
        this.selAllFlag = true;
      } else {
        this.selAllFlag = false;
      }
    },
    handelSelection(row){
      this.selection = row
    },
    // 取消
    diaCancel () {
      this.$emit('cancleBack')
    },
  }
}
</script>

<style>
.div_btn {
  margin: 0 0 20px 0;
}
</style>