gdy_pc_8/src/examine/views/remindSet.vue

<template>
  <div class="all">
    <div class="flex-box-ce">
      <div class="flex-1">
        <div class="title">指定分组</div>
        <div class="text fontColorB">可添加30个分组，每组最多设置50人</div>
      </div>
      <el-button  size="small" type="primary" @click="openAdd()"><i class="el-icon-plus"></i>添加分组</el-button>
    </div>
    <div class="table-box" style="margin-top: 20px;">
      <el-table :data="AdministratorList" style="width: 800px;" v-loading="loading">
        <el-table-column prop="name" label="名称" width="300"></el-table-column>
        <el-table-column label="人员">
          <template slot-scope="scope">
            <Tooltip v-if="scope.row.names" :preHtml="scope.row.names"><span>{{scope.row.names}}</span></Tooltip>
             <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button  @click="openAdd(scope.row)" type="text" class="blue">编辑</el-button>
            <el-button  @click="deleteUser(scope.row.id)" type="text" class="red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="addFormData.id? '设置分组':'添加分组'" :visible.sync="isShowAdd" :close-on-click-modal="false" width="700px">
        <div style="padding: 20px;padding-bottom: 0;">
          <el-form :model="addFormData" ref="addFormData" label-width="120px" class="form">
            <el-form-item label="分组名称" prop="name" :rules="[{ required: true, message: '请填写分组名称'}, { min: 2, max: 20, message: '长度在 2 到 20 个字符'}]" >
              <el-input style="width: 500px;"  v-model="addFormData.name" placeholder="请输入分组名称(限20字)" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="人员" prop="base_point">
              <div class="border flex-box-ce" style="margin-top: 5px;">
                <div class="flex-1">
                  <div class="fontColorB font-flex-word"  style="width: 430px;" v-if="employee_selected_all.employee.length>0">
                      <span v-for="item in employee_selected_all.employee" :key="item.id">{{item.name}},</span>
                  </div>
                  <span v-else>选择所属人员</span>
                </div>
                <i class="el-icon-arrow-down icon-right"></i>
                <div class="inputDc" @click="show_employee_selector_all=true"></div>
              </div>
            </el-form-item>
          </el-form>
          <div class="flex-box-end" style="margin-top: 40px;">
            <el-button @click="isShowAdd=false">取消</el-button>
            <el-button type="primary" @click="confirmAdd('addFormData')">提交</el-button>
          </div>
        </div>
    </el-dialog>
    <!-- 选择负责人 -->
    <EmployeeSelector
      :is_filtration_creator="false"
      title="选择人员"
      :max="50"
      :isChecKedAll="false"
      :selected="employee_selected_all"
      :visible.sync="show_employee_selector_all"
       @confirm="employee_confirm_all"
     />
  </div>
</template>

<script>
import EmployeeSelector from '@/components/EmployeeSelector';
import Tooltip from '@/components/Tooltip'; //鼠标悬浮显示文字
export default {
  components: { EmployeeSelector,Tooltip },
  name: 'JurisdictionSet',
  data() {
    return {
      loading: false,
      isShowAdd:false,
      AdministratorList:[],
      userInfo: this.$userInfo(),
      addFormData:{
        name:'',
        employee_ids:[]
      },
      employee_selected_all: { dept: [], employee: [] },
      show_employee_selector_all: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    openAdd(item){
      if(item){
        this.addFormData={
          id:item.id,
          name:item.name,
          employee_ids:item.employee_ids
        };
        this.employee_selected_all.employee=item.employee_ids.map(item=>{
          return this.$getEmployeeMapItem(item)
        })
        this.isShowAdd = true;
      }else{
        if(this.AdministratorList.length>=30){
           this.$message.error('分组最多为30个');
           return false
        }
        this.addFormData={
          name:'',
          employee_ids:''
        };
        this.employee_selected_all.employee=[];
        this.isShowAdd = true;
      }
    },
    confirmAdd(formName){
      this.$refs[formName].validate(valid => {
        if (valid) {
            this.addFormData.employee_ids=this.addFormData.employee_ids.toString();
            if(this.addFormData.id){
              var http1 = this.$axiosUser('POST','/api/pro/sm/group/name',this.addFormData); // 名称
              var http2 = this.$axiosUser('POST','/api/pro/sm/group/employee',this.addFormData); // 日期
              Promise.all([http1, http2]).then(res => {
                    this.$message.success('已编辑');
                    this.getList();
              }).finally(() => {
                this.isShowAdd = false;
              })
            }else{
              this.$axiosUser('post','api/pro/sm/group/create', this.addFormData).then(res => {
                    this.$message.success('已添加');
                    this.getList();
              }).finally(() => {
                this.isShowAdd = false;
              });
            }

        }
      })
    },
    deleteUser(id) {
      this.$confirm('确定删除该分组?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.$axiosUser('post', '/api/pro/sm/group/delete', { id: id }).then(res => {
            this.$message.success('删除成功');
            this.getList();
          });
      }).catch(() => {});
    },
    getList(){
      this.loading=false;
      this.$axiosUser('get', '/api/pro/sm/group').then(res => {
        let list=res.data.data.list;
        list.forEach(item=>{
          if(item.employee_ids.length>0){
            let names='';
            item.employee_ids.forEach(e=>{
              names+=this.$getEmployeeMapItem(e).name+','
            })
            item.names=names
          }
        })
        this.AdministratorList=list;
      }).finally(()=>{
        this.loading=false;
      });
    },
    employee_confirm_all(val){
      this.employee_selected_all.employee=val.employee;
      this.addFormData.employee_ids=val.employee.map(item=>{
        return item.id
      })
    },
  }
};
</script>

<style scoped="scoped">
.all {
  min-height: calc(100vh - 210px);
  overflow: auto;
  padding: 10px;
}
.title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.name {
  padding-left: 10px;
}
.title-f {
  margin-bottom: 20px;
}
  .border {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #C0C4CF;
    font-size: inherit;
    height: auto;
    outline: 0;
    padding: 0 15px;
    padding-right: 10px;
    line-height: 34px;
    width: 500px;
    position: relative;
    cursor: pointer;
  }
  .border .font-flex-word{
    color: #606266;
  }
  .border:hover{
    border: 1px solid #c0c4cc;
  }
  .inputDc {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9;
    cursor: pointer;
  }
.checkChild {
  background-color: #fbfdff;
  margin-left: 20px;
}
.li {
  border-bottom: 1px solid #f1f1f1;
}
.li:hover {
  background-color: #f5f7fa;
}
.ul {
  margin: 20px 0;
  margin-top: 10px;
}
</style>