理解错误的代码划草稿，丢掉前上传备份

<template>
  <div>
    <div class="search_stat">
      <app-search :searchByCompany="false" @search="search" :searchFieldArray.sync="searchFieldArray"/>
    </div>
    <div class="table_wrapper">
      <div class="table_header">
        <span class="table_name">班次为员列有记录</span>
        <span class="table_name adduser" @click="addCoupon">新增班次人员</span>
      </div>
      <el-table
          border
          :data="tableList">
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status !== '0'" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button v-else @click="handleView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="user_id_list" label="当班人员">
          <template slot-scope="scope">{{ scope.row.user_id_list.split(',').join(',') }}</template>
        </el-table-column>
        <el-table-column prop="create_admin" label="创建人"></el-table-column>
        <el-table-column sortable prop="create_time" label="创建时间"></el-table-column>
        <el-table-column sortable prop="editor" label="修改人"></el-table-column>
        <el-table-column sortable prop="update_time" label="修改时间"></el-table-column>
        <el-table-column sortable prop="status" label="状态">
          <template v-slot="{row}">
            <el-tag :type="row.status == 0 ? 'success' : row.status == 1 ? 'danger' : 'warning'">
              {{row.status == 0 ? '历史' : row.status == 2 ? '预备' : '当前'}}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!--      弹出层显示，这儿的数据只是展示不能修改，遍历当班人员的对象,-->
      <el-dialog title="查看当班数据" :visible.sync="showActive">
        <div>
          <el-table
              border
              :data="viewForm">
            <el-table-column prop="name" label="选择人员"></el-table-column>
            <el-table-column prop="permission" label="角色"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column sortable prop="new date()" label="修改时间"></el-table-column>
          </el-table>
        </div>
      </el-dialog>

      <!--   这是一个新增用的编辑的弹出层罗辑-->
      <el-dialog title="新增班次人员" :visible.sync="addDialogVisible">
        <div>
          <h4 style="margin: 10px" @click="handleAdd"> + 新增</h4>
          <el-table
              border
              :data="addTableData">
            <el-table-column prop="edit" label="选择人员">
              <template slot-scope="scope">
                <el-select v-model="scope.row.id" placeholder="请选择" @change="handleNameChange(scope.row)">
                  <el-option v-for="item in uList" :key="item.id" :label="item.real_name" :value="item.id"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="emsRoleName" label="角色名称"></el-table-column>
            <el-table-column  prop ="authIdList" label="审核权限"> </el-table-column>
            <el-table-column sortable prop="cz" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="ahandleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="butt">
          <el-button @click="addDialogVisible = false" >返回</el-button>
          <el-button @click="addhandleSave">保存</el-button>
        </div>
      </el-dialog>

<!--      编辑现有人员列表-->
      <el-dialog title="编辑班次人员记录" :visible.sync="editDialogVisible">
        <div>
          <h4 style="margin: 10px" @click="addEditHand"> + 添加</h4>
          <el-table
              border
              :data="editTableData">
            <el-table-column prop="edit" label="选择人员">
              <template slot-scope="scope">
                <el-select v-model="scope.row.personName" placeholder="请选择" @change="eHandleNameChange(scope.row)">
                  <el-option v-for="item in uList" :key="item.id" :label="item.real_name" :value="item.id"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="emsRoleName" label="角色名称"></el-table-column>
            <el-table-column  prop ="authIdList" label="审核权限"> </el-table-column>
            <el-table-column sortable prop="cz" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="ehandleDelete(scope.row,scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="butt">
          <el-button @click="editDialogVisible = false" >返回</el-button>
          <el-button @click="edithandleSave">保存</el-button>
        </div>
      </el-dialog>

      <!--          以下是分页组件&ndash;&gt;-->
      <app-pagination ref="pagination" :params="queryParams" :url="url" :tableList.sync="tableList"></app-pagination>
    </div>
  </div>
</template>

<script>
import AppPagination from "@/components/AppPagination/index"
import AppSearch from "@/components/AppSearch/index"
import Template from "@/components/Coupon/template5/template";
import InputTag from "@/components/InputTag";

export default {
  components: {InputTag, Template, AppPagination, AppSearch,},
  props: {
    assetId: {
      require: false,
    },
  },
  data() {
    return {
      multipleSelection:[],
      showActive: false,
      userList:'',
      ids:[],
      allUser:[],
      editDialogVisible: false,
      addDialogVisible: false,
      viewForm: [],
      personId:'',
      editTableData: [],
      addTableData:[],
      uList:[],
      tableList: [],
      currentIndex: null,
      url: '/takeOverMember/page',
      queryParams: {
        assetId: this.assetId,
      },
      searchFieldArray: [
        {
          type: "date",
          key: "createTime",
          value: '',
          start_placeholder: "开始时间",
          end_placeholder: "结束时间",
        },
        {
          type: "input_search",
          key: "fromUserId",
          placeholder: "姓名/手机号",
          selectUrl: this.API.SEARCH_USER,
          value: '',
          optionsList: []
        },
      ]
    }
  },
  // 创建页面时获取必要的所有员工姓名和id,并根据id轮询遍历完当班人员信息，
  // 避免在下拉选择在发送时网络不好时加载不到信息
  created() {
    this.request({
      url:"/takeOverMember/personInfo"
    }).then(resp => {
      this.uList = resp
      this.ids = this.uList.map(item => item.id)
      this.ids.forEach(id => {
        this.request({
          url: "/takeOverMember/OnDutyPersonnelInfo",
          params:{person_id:id}
        }).then(response => {
              const user = response;
              this.allUser.push(user);
            })
        })
     })
  },

  methods: {
    // 删除一行
    ahandleDelete(index) {
      this.addTableData.splice(index, 1)
    },
    ehandleDelete(row,index) {
       this.editTableData.splice(index, 1)
    },
    // 编辑现有一行
    handleEdit(row) {
      this.editDialogVisible = true
      const userList = row.user_id_list.split(',')
      this.editTableData = userList.map(name => {
        const item = this.allUser.find(user => user.personName === name)
      return {
        emsRoleName: item.emsRoleName,
        personName: item.personName,
        phone: item.phone,
        authIdList: item.authIdList.map(item => item.name).join(','),
        }
      })
    },
   // 查看逻辑不能编辑
    handleView(row) {
      const userList = row.userList.split(',')
      this.viewForm = userList.map(name => {
        const item = this.List.find(user => user.label === name)
        return {
          name: item.label,
          age: item.age,
          permission: item.permission,
          phone: item.phone
        }
      })
      this.showActive = true
    },
    // 保存新增还是还是编辑的逻辑，主要是判断有无重复
    addhandleSave() {
       this.userList = this.addTableData.map(item => item.id).join(',')
      const tList = this.userList.split(',')
      var containsDuplicate = function(nums){
        return nums.length !== [...new Set(nums)].length
      }
      if(!containsDuplicate(tList)){
        this.request({
          url:"/takeOverMember/insertOnDutyPersonnel",
          params:{user_id_list:this.userList}
        }).then(resp => {
          this.addDialogVisible = false
        })
      }else {
        this.message.error("当班人员不能重复，请检查在配置")
      }
    },
     // 由编辑状态后的保存
    edithandleSave(){

    },

    // 当编辑菜单下拉框改变时，通过查找到的值去的list的值，然后保存到字段中显示
    handleNameChange(row) {
      this.request({
        url:"/takeOverMember/OnDutyPersonnelInfo",
        params:{person_id:row.id}
      }).then(resp => {
        row.phone = resp.phone
        row.emsRoleName = resp.emsRoleName
        row.authIdList = resp.authIdList.map(item => item.name).join(', ')
      })
    },
    eHandleNameChange(row) {
      this.request({
        url:"/takeOverMember/OnDutyPersonnelInfo",
        params:{person_id:row.personName}
      }).then(resp => {
        row.phone = resp.phone
        row.emsRoleName = resp.emsRoleName
        row.authIdList = resp.authIdList.map(item => item.name).join(', ')
      })
    },
    search(params) {
      if (this.assetId) {
        params["assetId"] = this.assetId;
      }
      this.queryParams = params;
    },
    // 新增行
    handleAdd(){
      this.addTableData.push({
        id:'',
        emsRoleName: '',
        phone: '',
        authIdList: '',
      })
    },
    addEditHand(){
      this.editTableData.push({
        emsRoleName: '',
        personName: "",
        phone: "",
        authIdList:"",

      })
    },
// 新增的弹出层
    addCoupon() {
      this.addDialogVisible = true
      this.addTableData = []
    },
  },
}
</script>

<style lang="scss" scoped>
.adduser {
  display: inline-block;
  margin-left: 15px;
  padding-left: 10px;
  height: 20px;
  line-height: 30px;
}
.m15px {
  margin-right: 25px;
}
.butt{
  margin: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>