szzs/src/views/base/equipment/index.vue

<template>
  <div class="equipment-box">
    <moduleView :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @modalHandle="modalHandle" @onRefresh="getList" 
    @resert="queryList" @search="queryList" @clickHandle="clickHandle" @detail="detail" />
    <adModal ref="adModalView" @successHandle="queryList" />
  </div>
</template>

<script setup>
  import stateRadio from './components/stateRadio.vue';
  import adModal from './components/adModal.vue';
  import { list, add, adSetting, update,del,adList,adMove } from '@/api/base/equipment.js'
  import { computed,getCurrentInstance,ref,markRaw,shallowRef } from "vue";
  const { proxy } = getCurrentInstance();
  const load = ref(false)
  const isSearch = ref(false)
  const time= ref(null);
  const timeNum = ref(0);
  
  const config = ref({
    attr:{
      calculateH:true
    },
    search:{
      columns:[
        [{
          span:6,
          // label:'设备名称',
          labelWidth:1,
          prop:'searchText',
          component:'by-input',
          compConfig:{ 
            attr:{
              placeholder:'请输入设备编码、设备名称、维修人、维修电话',
              prefixIcon:'vxe-icon-search'
            }
          }
        },{
          span:6,
          labelWidth:80,
          label:'状态',
          prop:'state',
          component:'by-select',
          compConfig:{ 
            attr:{
              clearable:true,
              placeholder:'状态',
              data:[{
                label:'开启',
                value:1
              },{
                label:'关闭',
                value:0
              }]
            }
          }
        },
        {
          span:6,
          labelWidth:100,
          label:'在线状态',
          prop:'onState',
          component:'by-select',
          compConfig:{
            attr:{
              clearable:true,
              placeholder:'在线状态',
              data:[{
                label:'在线',
                value:1
              },{
                label:'休眠',
                value:0
              }]
            }
          }
        }
        ]
      ]
    },
    tool:{
      tools:{
        add:true,
        delete:true,
        search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        // seq:true,
        align:'center',
        checkbox:true
      },
      columns:[{
        title:'设备编码',
        field:'equipmentCode',
        width:80
      },
      {
        title:'设备名称',
        field:'equipmentName',
        isDetail:true,
        width:100
      },
      {
        title:'状态',
        field:'state',
        component:'textChange',
        compConfig:{
          attr:{
            data:[{
              label:'开启',
              value:1,
              backgroundColor:'#f0f9eb',
              color:'#67c23a'
            },{
              label:'关闭',
              value:0,
              backgroundColor:'#fef0f0',
              color:'#f56c6c'
            }]
          }
        }
      },
      {
        title:'在线状态',
        field:'onState',
        component:'textChange',
        compConfig:{
          attr:{
            data:[{
              label:'在线',
              value:1,
              backgroundColor:'#f0f9eb',
              color:'#67c23a'
            },{
              label:'休眠',
              value:0,
              backgroundColor:'#fef0f0',
              color:'#f56c6c'
            }]
          }
        }
      },
      {
        title:'所属厂家',
        field:'manufacturers'
      },
      {
        title:'维修人',
        field:'maintainName'
      },
      {
        title:'维修电话',
        field:'maintainTelephone'
      },
      {
        title:'加入时间',
        field:'enterTime'
      },
      {
        title:'操作',
        action:true,
        plugins:[{
          name:'广告设置',
          audit:'',
          event:{
            click:item => {
              adSet(item)
            }
          }
        }]
      }]
    },
    modal:{
      tool:{
        tools:{
          return:true,
          add:true
        }
      },
      form:{
        attr:{
          width:'1000px',
          size:'small',
          labelWidth:'130px',
          rules:{
            equipmentCode:[
              {required: true, message: '请输入设备编码', trigger: 'blur'}
            ],
            equipmentName:[
              {required: true, message: '请输入设备名称', trigger: 'blur'}
            ],
            manufacturers:[
              {required: true, message: '请输入所属厂家', trigger: 'blur'}
            ],
            state:[
              {required: true, message: '请选择状态', trigger: 'blur'},
            ],
            addrCode:[
              {required: true, message: '请选择位置', trigger: 'blur'}
            ],
            addrInfo:[
              {required: true, message: '请输入详细地址', trigger: 'blur'}
            ],
            maintainName:[
              {required: true, message: '请输入维修人', trigger: 'blur'},
            ],
            onState:[
              {required: true, message: '请输入在线状态', trigger: 'blur'},
            ],
            maintainTelephone:[
            {required: true, message: '请输入维修人电话', trigger: 'blur'},
            { validator: (rule, value, callback) => {
                if (value) {
                  if(!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value)) {
                    callback(new Error('手机号格式不正确！'));
                  }else{
                    callback();
                  }
                } else {
                  callback();
                }
              }, trigger: 'blur' }
            ]
          }
        },
        columns:[
          [{
            label:'设备编码',
            prop:'equipmentCode',
            component:'by-input',
            compConfig:{
              attr:{}
            }
          },{
            label:'设备名称',
            prop:'equipmentName',
            component:'by-input',
            compConfig:{
              attr:{}
            }
          }],
          [{
            label:'所属厂家',
            span:12,
            prop:'manufacturers',
            component:'by-input',
            compConfig:{
              attr:{}
            }
          }
          ,{
            label:'状态',
            prop:'state',
            component:'by-select',
            compConfig:{ 
              attr:{
                clearable:true,
                data:[{
                  label:'开启',
                  value:1
                },{
                  label:'关闭',
                  value:0
                }]
              }
            }
          }
          ],
          [{
            label:'在线状态',
            prop:'onState',
            component:shallowRef(stateRadio)
          }],
          [{
            label:'维修人',
            prop:'maintainName',
            component:'by-input'
          },{
            label:'维修电话',
            prop:'maintainTelephone',
            component:'by-input'
          }],
          // [{
          //   label:'授权状态',
          //   prop:'state',
          //   component:shallowRef(stateRadio)
          // }],
          [{
            label:'位置',
            prop:'addrCode',
            component:'by-area',
            compConfig:{
              attr:{
                area:'addrCodeInfo',
                areaCode:'addrCode'
              }
            }
          }],
          [{
            label:'详细地址',
            prop:'addrInfo',
            component:'by-input'
          }],
          [{
            label:'标记',
            prop:'lnglat',
            component:'MapMaker',
            compConfig:{
              attr:{
                lng:'lng',
                lat:'lat'
              }
            }
          }],
          [{
            label:'备注',
            prop:'remark',
            component:'by-input',
            compConfig:{
              attr:{
                type:'textarea'
              }
            }
          }]
        ]
      }
    }
  })
  const adSet = row => {
    proxy.$refs.adModalView.setShow(true);
    proxy.$refs.adModalView.setValue(row)
  }
  
  const clickHandle = n => {
    if(n == 'onAdd'){
      config.value.modal.tool.tools.add = true;
      delete config.value.modal.tool.tools.save;
      proxy.$refs.view.initFormTool();
    }
    if(n == 'onDelete'){
      delHandle()
    }
  }
  const modalHandle = n =>{
    if(n == 'onAdd'){
      proxy.$refs.view.getFormValidate(addData)
    }

    if(n == 'onSave'){
      proxy.$refs.view.getFormValidate(onSave)
    }
  }
  //添加
  const addData = () => {
    let value = proxy.$refs.view.getFormValue();
    if(value){
      load.value = true;
      add(value).then(res =>{
        load.value = false;
        proxy.$message({
          message:res.msg,
          type:'success'
        });
        proxy.$refs.view.closeModal();
        getList();
      }).catch(()=>{
        load.value = false;
      })
    }
  }
  //保存
  const onSave = () => {
    let data = proxy.$refs.view.getFormValue();
    load.value = true;
    update(data).then(res => {
      proxy.$message({
        message:res.msg,
        type:'success'
      });
      load.value = false;
      proxy.$refs.view.closeModal();
      pagination();
    }).catch(() => {
      load.value = false;
    })
  }
  const delHandle = () => {
    let data = proxy.$refs.view.getSelectData();
    let ids = []
    if(!data && data.lenght == 0) {
      proxy.$message('请选择数据')
      return
    }
    for(const item of data) {
      ids.push(item.equipmentId)
    }
    proxy.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      load.value = true;
      del({
        equipmentIds:ids,
      }).then(()=>{
        proxy.$message({message:'删除成功！',type:'success'})
        load.value = false;
        getList();
      }).catch(()=>{
        load.value = false;
      })
    }).catch(()=>{})
  }
  const detail = () => {
    config.value.modal.tool.tools.save = true;
    delete config.value.modal.tool.tools.add;
    proxy.$refs.view.initFormTool();
  }
  const pagination = () => {
    if(isSearch.value){
      queryList();
    }else{
      getList()
    }
  }
  //列表请求（包含分页和搜素条件）
  const queryList = () => {
    isSearch.value = true;
    let data = proxy.$refs.view.getQuery();
    requestList(data);
  }
  const getList = () => {
    if(!proxy.$refs.view){
      if(timeNum.value > 5){
        return
      }
      setTimeout(()=>{
        getList()
      },500) 
      timeNum.value ++;
      return
    }
    timeNum.value = 0;
    isSearch.value = false;
    let data = proxy.$refs.view.getPage();
    requestList(data);
  }
  const requestList = data => {
    load.value = true;
    list(data).then(res => {
      load.value = false;
      proxy.$refs.view.setTableValue(res.data.data);
      let page = {
        pageNo: res.data.page.current, //当前页
        pageSize: data.pageSize, //每页条数
        total: res.data.page.total //总条数
      };
      proxy.$refs.view.setPage(page)

    }).catch(()=>{
      load.value = false;
    })
  }
  nextTick(()=>{
    getList()
  })
</script>

<style lang="scss" scoped>
.equipment-box{
  width: 100%;
  height: 100%;
}
.equip-info{
  padding: 8px 16px;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(255,240,184,0.95);
  font-size: 12px;
  margin-bottom: 16px;
  .equip-state{
    .norm{
      color: #00AE66;
    }
    .disa{
      color: red;
    }
  }
}
.page{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 8px;
}
</style>