iot-front-ui/src/components/common/dialog/selectUserDialog.vue

<script>
import SecurityDeviceSelect from "@/components/security/common/securityDeviceSelect.vue";
export default {
  comments: {
    SecurityDeviceSelect
  },
  props: {
    callback: Function,
    show: Boolean,
  },
  data() {
    return {
      companyData: [
        {
          title: '北京电信规划院',
          key: '北京电信规划院'
        }
      ],
      data: [
        {
          name: '李自成',
          phone: '15602407624',
          dept: '业务一部',
        },
        {
          name: '张丰毅',
          phone: '13084694502',
          dept: '业务一部',
        },
        {
          name: '李佳佳',
          phone: '13002413640',
          dept: '业务一部',
        },
        {
          name: '王雪',
          phone: '17574063735',
          dept: '业务一部',
        },
        {
          name: '吴义刚',
          phone: '17135546914',
          dept: '业务一部',
        },
        {
          name: '王羽',
          phone: '15970548072',
          dept: '业务一部',
        },
        {
          name: '李一水',
          phone: '13485387535',
          dept: '业务一部',
        },{
          name: '张果果',
          phone: '15826958745',
          dept: '业务一部',
        },{
          name: '王峰',
          phone: '17658963247',
          dept: '业务一部',
        },{
          name: '孙舒予',
          phone: '13025698756',
          dept: '业务一部',
        },
      ],
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          scopedSlots: { customRender: 'name' },
        },
        {
          title: "手机号",
          dataIndex: "phone",
          key: "phone",
          scopedSlots: { customRender: 'phone' },
        },
        {
          title: "部门",
          dataIndex: "dept",
          key: "dept",
          scopedSlots: { customRender: 'dept' },
        },
      ],
      selectedRowKeys: [],
    }
  },
  emits: ["update:show"],
  setup(props, context) {
    const methods = {
      updateShow(obj) {
        context.emit("update:show", obj);
        if (!obj) {
          this.selectedRowKeys = []
        }
      },
    };
    return methods;
  },
  mounted() {
    this.selectedRowKeys = []
  },
  created() {
  },
  methods: {
    ok() {
      if (this.selectedRowKeys.length>0) {
        let data = [];
        this.selectedRowKeys.forEach(i=>{
          data.push(this.data[i])
        });
        this.callback(data);
        this.updateShow(false);
      } else {
        this.$message.warning('请至少选择一项')
      }
    },
    addUser(val) {
      //console.log(val)
    },
    onSelectChange(keys) {
      this.selectedRowKeys = keys
    }
  }
}
</script>


<template>

  <div class="selectUserDialog">
    <a-modal
        title="添加人员"
        v-if="show"
        :visible="show"
        width="900px"
        @cancel="updateShow(false)"
        @ok="ok"
    >
      <a-row :gutter="[12,12]" style="height: 450px">
        <a-col :span="6" style="height: 100%">
          <div class="selectUserDialog-company" style="height: 100%">
            <SecurityDeviceSelect :select-first="true" left-title="名单" :tree-data="companyData" :callback="addUser"></SecurityDeviceSelect>
          </div>
        </a-col>
        <a-col :span="18" style="height: 100%;">
          <div class="selectUserDialog-userList">
            <a-table
                :rowKey=" (record, index) => index"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :columns="columns"
                :data-source="data"
                :scroll="{y: 400}"
                :pagination="false"
            >

            </a-table>
          </div>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<style lang="less">
.selectUserDialog {
  width: 100%;
  height: 100%;
  .selectUserDialog-company {

  }
  .selectUserDialog-userList {

  }
}
</style>