epmet-oper-lingshan/epmet-oper-web/src/views/modules/workPc/customer-add-or-update.vue

<template>
  <el-dialog :visible.sync="visible"
             :title="'选择客户'"
             :close-on-click-modal="false"
             :close-on-press-escape="false">

    <div class="customerDiv">

      <el-checkbox-group v-model="menuList">

        <el-checkbox v-for="(item,index) in customerList"
                     :key="index"
                     class="customerItem"
                     :label="item.customerId"
                     @change="changeCheck($event,index)">{{item.customerName}}</el-checkbox>

      </el-checkbox-group>

    </div>

    <!-- <el-row>
      <el-col :span="12">
        <el-form-item size="mini"
                      :label="$t('role.menuList')">
          <el-tree :data="menuList"
                   :props="{ label: 'name', children: 'children' }"
                   node-key="id"
                   ref="menuListTree"
                   accordion
                   show-checkbox>
          </el-tree>
        </el-form-item>
      </el-col>

    </el-row> -->

    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary"
                 @click="saveMenuList()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from "@/js/dai/request";

let loading // 加载动画
export default {
  data () {
    return {
      visible: false,

      tableId: "",//选中的表单id，从父组件传过来
      customerList: [],//客户列表
      menuList: [],//客户选中的菜单列表
      // deptList: [],
      checkCustomerList: []
    }
  },
  computed: {
  },
  methods: {
    changeCheck (value, index) {
      console.log(value, index)
      this.$set(this.customerList[index], "check", value)
      // this.customerList[index].check = value
    },
    async init (tableId) {
      this.visible = true
      this.tableId = tableId
      this.startLoading()
      // this.$refs.menuListTree.setCheckedKeys([])
      // this.$refs.deptListTree.setCheckedKeys([])
      this.customerList = []
      this.menuList = []
      await this.getMenuList()
      await this.getCustomerList()
      this.endLoading()

    },

    // 获取菜单列表
    async getMenuList () {
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/access/govcustomermenu/getcustomerids"
      const url = "/gov/access/govcustomermenu/getcustomerids"
      const params = {
        tableId: this.tableId
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {
        this.menuList = data
      } else {
        this.$message.error(msg + "：" + internalMsg)
      }

    },

    async getCustomerList () {
      window.app.ajax.get(
        "/oper/crm/customer/getvalidcustomerlist",
        {},
        (data, rspMsg) => {
          this.customerList = data;
          // if (this.menuList.length > 0) {

          //   this.customerList.forEach(item => {

          //     for (let i = 0; i < this.menuList.length; i++) {
          //       console.log(this.menuList[i])
          //       if (item.customerId === this.menuList[i]) {
          //         item.check = true
          //         // break
          //       }
          //     }

          //   });
          // }
          console.log(this.customerList)
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        }
      )
    },

    async saveMenuList () {
      this.checkCustomerList = []
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/access/govcustomermenu/addcustomermenu"
      const url = "/gov/access/govcustomermenu/addcustomermenu"
      // this.upOrDownForm.roleList = roleList

      // this.customerList.forEach(element => {

      //   if (element.check) {
      //     this.checkCustomerList.push(element.customerId)
      //   }
      // });
      const parmas = {
        tableId: this.tableId,
        customerIds: this.menuList
      }

      const { data, code, msg, internalMsg } = await requestPost(url, parmas)

      if (code === 0) {
        this.$message.success("保存成功")
        this.visible = false

      } else {
        this.$message.error(msg + "：" + internalMsg)
      }

    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }

  }
}
</script>

<style scoped>
.customerDiv {
  margin-left: 100px;
}
.customerItem {
  display: block;
  margin: 20px;
  font-size: 15px;
}

.item_span {
  margin-left: 20px;
}
</style>