playlet/project/src/components/warningManage/warningListI...

<template>
  <div class="con" v-loading="loading">
    <div class="tableInfo">
      <div class="flex">
        <div class="totalCustom">共<span>{{tableData.length}}</span>个预警组</div>
        <self-input :hasLabel="false" style="margin-left:60px" label_name="关键词搜索" @inputChange='(val)=>{input_keyword = val;init()}'></self-input>
      </div>
      <div class="flex">
        <el-button type="primary" size="mini" @click="openDialog('add')">添加预警组</el-button>
      </div>
    </div>
    <el-table ref="multipleTable" height="calc(100vh - 130px)" :data="tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column show-overflow-tooltip align="center">
        <template slot="header">
          <div style="margin-left:60px">预警组</div>
        </template>
        <template slot-scope="scope">
          <div style="margin-left:60px">{{scope.row.name}}</div>
        </template>
      </el-table-column>
      <el-table-column label="预警人" align="center">
        <template slot-scope="scope">
          <div class="customerServiceTagBox biaoqian" style="justify-content: space-between;display:inline-block" v-if="scope.row.users">
            <div class="customerServiceTag" v-for="(item,index) in scope.row.users" :key="index+'user'" style="justify-content:flex-start;">
              <i class="el-icon-user-solid"></i> {{ item.name }}
              <i class="el-icon-phone" style="margin-left:8px"></i>{{item.phone}}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div class="flex" style="justify-content:center">
            <div class="c-00B38A pointer" style="margin:0 6px" @click="getGroupDetail(scope.row.id)">编辑</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增编辑权限-->
    <el-dialog class="dialogCon_permission" :title="dialogTitleName" :visible.sync="dialogTableVisible" :append-to-body="true" width="500px">
      <div class="dialogCon" v-loading="dialogLoading">
        <div class="itemBox" style="margin-bottom:20px">
          <div class="name"><em>*</em>预警组名称:</div>
          <div class="ipt">
            <el-input size="small" v-model="groupName" placeholder="请输入预警组名称"></el-input>
          </div>
        </div>
        <div v-for="(item,index) in warningArrs" :key="index+'wans'">
          <div class="f14 c-00B38A" v-if="warningArrs&&warningArrs.length>1" :class="index==0 ? '' : 'tMar20'">预警人员 {{index+1}}
            <i class="el-icon-circle-close f14 pointer" @click="deleItem(item.id)"></i>
          </div>
          <div class="flex">
            <div class="itemBox">
              <div class="name"><em>*</em>预警人员:</div>
              <div class="ipt">
                <el-input size="small" v-model="item.name" placeholder="请输入预警人员"></el-input>
              </div>
            </div>
            <div class="itemBox lMar14">
              <div class="name" style="width: 60px"><em>*</em>手机号:</div>
              <div class="ipt">
                <el-input size="small" v-model="item.phone" placeholder="请输入手机号"></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="itemBox">
          <div class="name"></div>
          <div class="ipt f13 pointer" @click="addItem"><i class="el-icon-circle-plus-outline f14 c-00B38A rMar5"></i>添加预警人员</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogTableVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addManager()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import selfInput from '@/components/assembly/screen/input.vue'
export default {
  components: { selfInput },
  name: "warningListInstall",
  data () {
    return {
      input_keyword: '',
      groupDetail: {},
      loading: false,
      dialogLoading: false,
      dialogTableVisible: false,
      dialogTitleName: '添加预警组',
      tableData: [],
      groupName: '',
      warningArrs: [
        {
          id: 0,
          name: "",
          phone: '',
        }
      ],
      okFlag: false,//true表示有问题不能提交
      okMes: '以上均为必填项'
    }
  },
  created () {
    this.init()
  },
  methods: {
    deleItem (id) {
      this.warningArrs.forEach((item, index) => {
        if (item.id == id) {
          this.warningArrs.splice(index, 1)
        }
      })
      this.warningArrs.forEach((item, index) => {
        item.id = index
      })
    },
    addItem () {
      this.warningArrs.push({
        id: this.warningArrs.length,
        name: "",
        phone: '',
      })
    },
    init () {
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.warn_groupList, {
        params: {
          keyword: this.input_keyword,
          sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : ''
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.tableData = res.rst
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getGroupDetail (id) {
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.warn_groupDetail, {
        params: {
          group_id: id,
          sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : ''
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.groupDetail = res.rst;
          this.groupName = res.rst.name;
          this.warningArrs = res.rst.users;
          this.warningArrs.forEach((item, index) => {
            item.id = index
          })
          this.dialogTitleName = '编辑预警组'
          this.dialogTableVisible = true;
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    addManager () {
      //判断值是否正确
      if (this.groupName == '') {
        this.$message({
          message: '请输入预警组名称',
          type: "warning"
        })
        return
      }
      this.warningArrs.forEach((item, index) => {
        if (item.name == '' || item.phone == '') {
          this.okFlag = true
          this.okMes = '以上均为必填项'
        } else {
          if (this.$judgePhone(item.phone) == 0) { // 是正确手机号
            this.okFlag = true
            this.okMes = '请填写正确手机号'
          } else {
            this.okFlag = false
          }
        }
      })
      if (this.okFlag) {
        this.$message({
          message: this.okMes,
          type: "warning"
        })
        return false
      }

      let axios_api = this.URL.warn_groupEdit;
      let params = {
        sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
        group_name: this.groupName,
        user_list: JSON.stringify(this.warningArrs)
      };
      if (this.dialogTitleName == '添加预警组') {
        axios_api = this.URL.warn_groupAdd
      } else {
        params.group_id = this.groupDetail.id;
      }
      this.dialogLoading = true
      this.$axios.post(this.URL.BASEURL + axios_api, params).then((res) => {
        var res = res.data
        this.dialogLoading = false;
        if (res && res.errno == 0) {
          this.dialogTableVisible = false
          this.init()
          this.$message({
            message: '成功！',
            type: "success"
          })
        } else {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch(() => {
        this.dialogLoading = false
      })
    },
    openDialog () {
      this.dialogTitleName = '添加预警组'
      this.groupName = '';
      this.warningArrs = [
        {
          id: 0,
          name: "",
          phone: '',
        }
      ],
        this.dialogTableVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/list.scss";
.tableInfo {
  height: 50px;
}
.dialogCon {
  margin-top: -20px;
  .itemBox {
    display: flex;
    align-items: center;
    margin-top: 6px;
    font-size: 14px;
    .name {
      width: 90px;
      flex-wrap: nowrap;
      em {
        color: red;
      }
    }
    .ipt {
      flex: 1;
    }
  }
}
.lableBox_dad {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  .lableBox {
    font-size: 12px;
    background-color: #f0f0f0;
    padding: 4px 8px;
    margin-top: 5px;
    margin-right: 4px;
    border-radius: 4px;
  }
}
</style>