第二次完美完成工作，心态爽爽的。

<template>
  <div>
    <!--表单搜索档2023-5-23，gpt歌者文明-->
    <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="personList">
        <el-table-column type="selection" width="55"></el-table-column>
        <!--判断是显示编辑还是查看,这个设想是状态1就是编辑,状态二就是查看,-->
        <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>
        <!--        这儿当班人员是一个数组,需要遍历填充,2023-5-23-->
        <el-table-column prop="userList" label="当班人员">

          <template slot-scope="scope">{{ scope.row.userList.split(',').join(',') }}</template>
        </el-table-column>
        <el-table-column prop="creator" label="创建人"></el-table-column>
        <el-table-column sortable prop="creatDate" label="创建时间"></el-table-column>
        <el-table-column sortable prop="editor" label="修改人"></el-table-column>
        <el-table-column sortable prop="editDate" 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="editDialogVisible">
        <div>
          <div style="margin: 15px;">
            <el-button @click="handleAdd">新增</el-button>
            <el-button @click="handleSave">保存</el-button>
          </div>
          <el-table
              border
              :data="editTableData">
            <el-table-column prop="edit" label="选择人员">
              <template slot-scope="scope">
                <el-select v-model="scope.row.name" placeholder="请选择" @change="handleNameChange(scope.row)">
                  <el-option v-for="item in List" :key="item.id" :label="item.label" :value="item.name"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="permission" label="角色"></el-table-column>
            <el-table-column sortable prop="cz" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </el-dialog>

      <!--      以下是分页组件-->
<!--      <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 {
      showActive: false,
      editDialogVisible: false,
      viewForm: [],
      editTableData: [],
      tableList: [],
      currentIndex: null,
      url: this.ZYBAPI.BALANCE_STAT_PAGE,
      queryParams: {
        assetId: this.assetId,
      },
      personList: [
        {userList: '张三,王五', creator: '张三',creatDate: '2023-05-20',editor: '张三',editDate: '2023-05-20',status: '1',},
        {userList: '张三,李四', creator: '张三',creatDate: '2023-05-20',editor: '张三',editDate: '2023-05-20',status: '0',},
      ],
      // 用于弹出层编辑时的初始数组
      // 这个对象是用于弹出层获取数组时需要权限或其它参数的例表
      List: [
        {id:1,label: '张三', name: '张三', phone: '13525', permission: '管理员'},
        {id:2,label: '李四', name: '李四', phone: '13230', permission: '普通员工'},
        {id:3,label: '王五', name: '王五', phone: '13228', permission: '财务'},
        {id:4,label: '赵六', name: '赵六', phone: '131288', permission: '主管'},
        {id:5,label: '谢八', name: '谢八', phone: '159285', permission: '主管'},
        {id:6,label: '周力', name: '周力', phone: '132258', permission: '普通员工'},

      ],
      searchFieldArray: [
        {
          type: "date",
          key: "createTime",
          value: '',
          start_placeholder: "开始时间",
          end_placeholder: "结束时间",
        },
        {
          type: "input_search",
          key: "fromUserId",
          placeholder: "姓名/手机号",
          selectUrl: this.API.SEARCH_USER,
          value: '',
          optionsList: []
        },
      ]

    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {

    },
    handleDelete(index) {
      // 删除一行数据
      console.log(index)
      this.editTableData.splice(index, 1)
    },
    handleEdit(row) {
      // 打开编辑弹出层
      this.editDialogVisible = true
      // 根据userList字符串切割生成表格数据

      const userList = row.userList.split(',')
      this.editTableData = userList.map(name => {
        const item = this.List.find(user => user.name === name)
        return {
          name: item.name,
          age: item.age,
          permission: item.permission,
          phone: item.phone
        }
      })
      // 保存当前修改的行，2023-5-23
      this.currentIndex = this.personList.indexOf(row)
      console.log("保存到几行,记录行号" + this.currentIndex)
    },

    handleView(row) {
      // 弹出查看弹出层，这儿是复制这一行，逻辑改过了
      // this.viewForm = Object.assign({}, 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
    },


    handleSave() {
      const userList = this.editTableData.map(item => item.name).join(',')

      const tList = userList.split(',')
     // 2023-5-23 判断是否重复
      var containsDuplicate = function(nums){
        return nums.length !== [...new Set(nums)].length
      }

      if(!containsDuplicate(tList)){
        console.log("当前保存的值函数名hanleSave" + userList)
        this.personList[this.currentIndex].userList = userList

      }else {
        alert("有重复")
      }
      this.editDialogVisible = false
    },

    // 当编辑菜单下拉框改变时，通过查找到的值去的list的值，然后保存到字段中显示
    handleNameChange(row) {
      let find = false
      // 以下是更新选择后的字段
      const item = this.List.find(user => user.name === row.name)
     row.name = item.name
     row.permission = item.permission
     row.phone = item.phone
     console.log("通过下拉菜单更新后的例" + row.name)
     },
    handleAdd() {
      // 新增一行数据
      this.editTableData.push({
        name: '',
        age: '',
        permission: '',
        phone: '',
      })
    },
    search(params) {
      if (this.assetId) {
        params["assetId"] = this.assetId;
      }
      this.queryParams = params;
    },

    addCoupon() {
      this.personList.unshift({
        userList: '',
        creator: '',
        creatDate: '',
        editor: '',
        editDate: '',
        status: '1',

      })

    },
  },
}
</script>

<style lang="scss" scoped>
.adduser {
  display: inline-block;
  margin-left: 15px;
  padding-left: 10px;
  height: 20px;
  line-height: 30px;
}

.m15px {
  margin-right: 25px;
}
</style>