123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- /**
- *props: objTypeArr:[](对象类数组)
- **/
- <template>
- <span>
- <span class="show-box">
- <el-button style="width: 250px;" @click="btnClick">{{btnInfo}}</el-button>
- <i class="el-icon-circle-close-outline clear-icon" @click="clear"></i>
- </span>
- <el-dialog
- title="选择报警条目"
- :visible.sync="dialogVisible"
- width="40%"
- center
- append-to-body
- >
- <div class="alarm-item-box">
- <div class="radio-box">
- <el-radio-group v-model="radioValue" @change="radioChange">
- <el-radio-button label="fixed">固定条目</el-radio-button>
- <el-radio-button label="customed">自定义条目</el-radio-button>
- </el-radio-group>
- </div>
- <div class="table-box">
- <el-table
- ref="multipleTable"
- :loading="loading"
- :data="tableData"
- tooltip-effect="dark"
- style="width: 100%"
- border
- @selection-change="handleSelectionChange">
- <el-table-column
- header-align="center"
- prop="code"
- label="报警条目编码">
- </el-table-column>
- <el-table-column
- header-align="center"
- prop="name"
- label="报警条目名称">
- </el-table-column>
- <el-table-column
- type="selection"
- width="55">
- </el-table-column>
- </el-table>
- </div>
- <div class="btn-box">
- <el-button type="primary" @click="save">保存</el-button>
- <el-button class="cancel-btn" @click="cancel">取消</el-button>
- </div>
- </div>
- </el-dialog>
- </span>
- </template>
- <script>
- import fixedApi from "@/api/alarm/alarm"
- import fixedUtils from './utils'
- import { mapGetters } from 'vuex'
- export default {
- name: 'alarm-item',
- data() {
- return {
- btnInfo: "报警条目",
- loading: false,
- dialogVisible: false,
- radioValue: 'fixed', //默认固定
- tableData:[],
- multipleSelection:[],
- alarmItemArr:[]
- }
- },
- props: {
- objTypeArr: {
- type: Array,
- default: []
- }
- },
- computed: {
- ...mapGetters("alarm",["spaceCodeObj"])
- },
- methods: {
- btnClick() {
- this.dialogVisible = true;
- this.btnInfo = "报警条目";
- this.getAlarmItem()
- },
- // radio改变事件
- radioChange(val) {
- this.multipleSelection = [];
- this.alarmItemArr = [];
- this.getAlarmItem();
- },
- // 多选事件
- handleSelectionChange(val,index) {
- this.multipleSelection = val;
- },
- // 获取报警条目数据
- getAlarmItem() {
- this.tableData = []
- let category = null;
- let objType = null;
- if(this.objTypeArr.length) {
- if(this.objTypeArr[0]) { //第一项全部
- objType = this.objTypeArr[0]
- if(this.objTypeArr[0] == "building" || this.objTypeArr[0] == "floor") {
- category = null;
- }else if(this.objTypeArr[0] == "space") {
- if(this.objTypeArr.length == 1) {
- category = null;
- } else {
- // category = this.objTypeArr[this.objTypeArr.length - 1];
- let p = fixedUtils.spaceSonCode(this.objTypeArr[this.objTypeArr.length - 1], this.spaceCodeObj);
- category = p;
- }
- } else {
- category = [this.objTypeArr[this.objTypeArr.length - 1]];
- }
- }
- }
- let params = {
- criteria: {
- type: this.radioValue, //报警条目类别,fixed 固定,customed 自定义 **必须
- projectId: this.radioValue == "fixed" ? null : this.projectId, //项目id,自定义类别时不为空
- objType: objType, //对象类型,building,floor,space,system,facility,为null或没有此字段时不过滤此项
- category: category ? {"$in":category} : null,
- }
- };
- fixedApi.getListData(params).then(res => {
- if(res.result == "success"){
- if(res.content && res.content.length) {
- this.tableData = res.content;
- // 判断是否已经选中
- this.$nextTick(() => {
- if(this.alarmItemArr) {
- let indexArr = [];
- this.alarmItemArr.length ? this.alarmItemArr.forEach((item, idx) =>{
- this.tableData.forEach((ele, index) =>{
- if(ele.code === item.code){
- indexArr.push(index);
- }
- })
- }) : null;
- indexArr.length ? indexArr.forEach((item) => {
- this.$refs.multipleTable.toggleRowSelection(this.tableData[item], true);
- }) : null
- } else {
- this.$refs.multipleTable.clearSelection();
- }
- })
- } else {
- this.tableData =[];
- }
- }
- });
- },
- save() {
- this.alarmItemArr = this.multipleSelection;
- let codeArr = [];
- let str = "";
- this.multipleSelection.forEach((item, index, arr) => {
- codeArr.push(item.code);
- if(index == arr.length-1) {
- str += item.name;
- } else {
- str += item.name + "、";
- }
-
- })
- if(str.length > 22) {
- let strTem= str.substring(0, 13);
- if(strTem.charAt(strTem.length-1) == "、") {
- strTem = strTem.substr(0, strTem.length-1)
- }
- this.btnInfo = strTem.charAt(strTem.length-1) == "、" ? strTem : (strTem + "...");
- } else {
- this.btnInfo = str
- };
- if( !this.multipleSelection.length ) {
- this.btnInfo = "报警条目";
- }
- this.$emit("change", this.radioValue, codeArr);
- this.dialogVisible = false;
- },
- cancel() {
- this.dialogVisible = false;
- },
- clear() {
- this.multipleSelection = [];
- this.alarmItemArr = [];
- this.btnInfo = "报警条目";
- this.$emit("change", this.radioValue, []);
- }
- },
- created() {
- if(!this.spaceCodeObj) {
- this.$store.commit("alarm/ADD_INDEX")
- }
- },
- watch:{
- objTypeArr: {
- handler() {
- this.clear();
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .show-box {
- font-size: 20px;
- .clear-icon{
- cursor: pointer;
- }
- }
- .alarm-item-box{
- .radio-box{
- text-align: center;
- }
- .table-box{
- height: 500px;
- overflow-y: auto;
- margin-top: 10px;
- }
- .btn-box{
- margin-top:10px;
- text-align: center;
- .cancel-btn{
- margin-left: 50px;
- }
- }
- }
- </style>
|