data_governance/src/views/homecomponents/BasicInfomation/ApplicationStation.vue

<template>
  <div class="content-main-manage">
    <div class="search-list">
      <div class="search-left">
        <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
           <FormItem label="" prop="businessTypeId">
             <Select v-model="tableParams.businessTypeId" placeholder="业务类型">
                <Option v-for="item in businessData" :value="item.id" :key="item.id">{{ item.businessTypeName }}</Option>
              </Select>
          </FormItem>
          <FormItem label="" prop="equipmentCheck">
             <Select v-model="tableParams.equipmentCheck" placeholder="接入设备">
                <Option v-for="item in equipmentCheckData" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
          </FormItem>
          <FormItem label="" prop="instrumentCheck">
            <Select v-model="tableParams.instrumentCheck" placeholder="接入仪表">
              <Option v-for="item in instrumentData" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="" prop="keywords">
            <Input placeholder="请输入关键字查询" clearable search v-model="tableParams.keywords" />
          </FormItem>
          <FormItem label="" >
            <Button type="primary" class="common-btn-search" @click="searchClick">
              <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
            </Button> 
            <Button type="primary" class="common-btn-search" style="margin-left:10px" @click="resetClick('tableParams')">
              <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
            </Button>   
          </FormItem>
        </Form>
    </div>
      <div class="btn-container">
        <Button icon="ios-add" class="common-add-btn" @click="addClick">新增应用</Button>
      </div>
    </div>
    <div class="manage-main-center">
      <Table :columns="columns" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
        <template slot="loading">
            <Loading-animation></Loading-animation>
        </template>
         <template slot-scope="{ row }" slot="action">
           <Tooltip content="详情" placement="top">
              <i class="iconfont icon-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
           </Tooltip>
           <Tooltip content="编辑" placement="top">
              <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(row)"></i>
           </Tooltip>
           <Tooltip content="删除" placement="top">
              <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
           </Tooltip>
        </template>
      </Table>
    </div>
      <div class="common-page">
      <div class="common-page-total">
        共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
      </div>
      <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
    </div>
    <Modal
      v-model="showModal"
      :title="title"
      width="36"
      ref="modalGrag"
      draggable
      reset-drag-position
      @on-visible-change="modalChange"
      :mask-closable="false"
      class-name="common-modal">
      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120">
        <FormItem label="应用ID：">
          <span v-show="title=='新增应用'">系统自动生成，唯一不重复</span>
          <span v-show="title=='编辑应用'">{{formOption.appCode}}</span>
        </FormItem>
        <FormItem label="应用名称：" prop="appName">
          <Input v-model.trim="formOption.appName" type="textarea" :rows="3" maxlength="100" show-word-limit />
        </FormItem>
        <FormItem label="业务类型：" prop="businessTypeId">
          <Select v-model="formOption.businessTypeId" placeholder="业务类型" >
             <Option v-for="item in businessModalData" :value="item.id" :key="item.id">{{ item.businessTypeName }}</Option>
          </Select>
        </FormItem>
			</Form>
      <div slot="footer">
          <Button @click="modalCancel">取消</Button>
          <Button type="primary" @click="modalOk('formOption')">确定</Button>
        </div>
    </Modal>
    <Modal
      v-model="modalStatus"
      :title="commonTitle"
      width="30"
      ref="modalGrag"
      draggable
      reset-drag-position
      :mask-closable="false"
      class-name="common-modal">
      <Icon type="ios-information-circle" :style="{ color: activeColor}" class="modal-icon"></Icon>
      <span class="modal-text">{{modalTitle}}</span>
      <div slot="footer">
          <Button @click="commonCancel">取消</Button>
          <Button type="primary" @click="commonOk">确定</Button>
        </div>
    </Modal>
    <Modal
      v-model="detailStatus"
      title="应用详情"
      width="45"
      ref="modalGrag"
      draggable
      reset-drag-position
      footer-hide
      :mask-closable="false"
      @on-visible-change="modalDetailChange"
      class-name="common-modal common-modal-detail">
       <Tabs :value="currentModalTabs" @on-click="tabsClick" class="common-tabs">
        <TabPane v-for="tab in tabsModalData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
      </Tabs>
        <div v-if="currentModalTabs =='基础信息'" class="modal-tabs-item">
          <div class="common-modal-content">
            <div class="modal-content-item" :class="{'item-especial': index == 1}" v-for="(item,index) in detailLabel" :key="index">
              <div class="modal-content-item-name">
              {{item.name}}
              </div>
              <div class="modal-content-item-value"> 
              <Tooltip placement="top-start" transfer max-width="350" v-if="item.value || item.value===0">
                <span>{{item.value}}</span>
                <div slot="content">
                  <p>{{item.value}}</p>
                </div>
              </Tooltip>
              <span v-else>{{item.value}}</span>
            </div>             
            </div>
          </div>
      </div>
      <rolling-detail-table :columns1="columnsEquip" apiUrl="metroapi/application/equipmentTypeInfo" ref="detailTable"
			 class="rolling-detail-table" v-if="currentModalTabs =='关联设备类型'"></rolling-detail-table>
      <!-- <Table :columns="columnsEquip" :data="equipTableData" class="common-table modal-tabs-item modal-table" no-data-text="" :row-class-name="rowClassName" v-if="currentModalTabs =='关联设备类型'" :loading="modalLoading">
        <template slot="loading">
            <Loading-animation></Loading-animation>
        </template>
      </Table> -->
    </Modal>
  </div>
</template>
<script>
const defaultFrom = {appName: '',businessTypeId: ''}
export default {
  name: "ApplicationStation",
  components:{
  },
  data() {
    return {
      loading: true,
      modalLoading: true,
      tableParams: {
        businessTypeId: '',
        equipmentCheck: '',
        instrumentCheck: '',
        keywords: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      tableTotal: 0,
      tablePage: 0,
      rowObj: {},
      businessData: [],
      businessModalData: [],
      equipmentCheckData: [
        {
          value: '-1',
          label: '接入设备'
        },
        {
          value: '1',
          label: '有'
        },
        {
          value: '0',
          label: '无'
        },
      ],
      instrumentData: [
        {
          value: '-1',
          label: '接入仪表'
        },
        {
          value: '1',
          label: '有'
        },
        {
          value: '0',
          label: '无'
        },
      ],
      columns: [
          {
            title: '应用ID',
            key: 'appCode',
            align: 'center'
          },
          {
            title: '应用名称',
            key: 'appName',
            align: 'center', 
            ellipsis: true,
            tooltip: true  
          },
          {
            title: '业务类型',
            key: 'businessTypeName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '接入设备数量',
            key: 'equipmentNum',
            align: 'center'
          },
          {
            title: '接入监测仪表',
            key: 'instrumentNum',
            align: 'center'
          },
          {
          title: '操作',
          align: 'center',
          slot: 'action',
          width: 120,
        }
      ],    
      tableTotal: 0,
      showModal: false,
      detailStatus: false, 
      modalStatus: false,
      title: '新增应用',
      commonTitle: "确认删除",
      activeColor: '#E92E2E',
      activeClass: '',
      modalTitle: '',
      formOption: {appName: '',businessTypeId:''},
      ruleValidate: {
        appName: [{
          required: true,
          message: '请输入应用名称',
          trigger: 'blur'
        }],
        businessTypeId: [{
          required: true,
          type: 'number',
          message: '请选择业务类型',
          trigger: 'change'
        }]
      }, 
      currentModalTabs:'基础信息',
      tabsModalData: [{label:'基础信息'},{label:'关联设备类型'}],
      detailLabel: [],
      columnsEquip: [
          {
            title: '序号',
            type: 'index',
            align: 'center'
          },
          {
            title: '设备类型名称',
            key: 'equipmentName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '监测模型指标数',
            key: 'equipmentNum',
            align: 'center'
          }
      ],
      detailParams: {
					applicationId: null,
					pageNum: 1,
					pageSize: 10
			},
    };
  },
  mounted() {
  },
  methods: {
    rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    // 分页
    changePage (val) {
      this.tableParams.pageNum = val
      this.getTableData()
    },
    //跳转
    sizeChange (val) {
      this.tableParams.pageSize = val
      this.getTableData()
    },
    getType  () {
      // 业务类型数据
      this.$get('metroapi/businessType/box').then(res=>{
        if (res.httpCode == 1 ){
          this.businessModalData = JSON.parse(JSON.stringify(res.data))
          this.businessData = res.data
          this.businessData.unshift({ id: '-1', businessTypeName: '业务类型' })
        } else {
          this.businessData = []
          this.businessModalData = []
        }
      })
    },
    // 获取表格数据
    getTableData () {
      let params = JSON.parse(JSON.stringify(this.tableParams))
      params.businessTypeId = params.businessTypeId == '-1' ?'':params.businessTypeId
      params.equipmentCheck = params.equipmentCheck == '-1' ?'':params.equipmentCheck
      params.instrumentCheck = params.instrumentCheck == '-1' ?'':params.instrumentCheck
      this.loading = true
      this.$get('metroapi/application/info/list', params).then(res=>{
        this.loading = false
          if (res.httpCode == 1 ){
            this.tableData = res.data.data
            this.tableTotal = res.data.count
            if (res.data.data.length==0) {
              this.tablePage = 0
            } else {
              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
            }
            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
              this.tableParams.pageNum--
              return this.getTableData()
            }
          } else {
            this.tableData = []
            this.tableTotal = 0
          }
        })
    },
    searchClick () {
      this.getTableData()
    },
    resetClick (name) {
     this.$refs[name].resetFields()
     this.tableParams.pageNum = 1
     this.getTableData()
    },   
    addClick () {
      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
      this.title = '新增应用'
      this.showModal = true
    },
    detailClick (row) {
      this.rowObj = row
      this.currentModalTabs = '基础信息'   
      this.detailStatus = true
      this.$get('metroapi/application/info', {appCode:row.appCode}).then(res=>{
        if (res.httpCode == 1 ){
          this.detailLabel = res.data
        } else {
          this.$Message.info(res.msg)
        }
      }) 
    },
    editClick (row) {
      this.rowObj = row
      this.formOption = JSON.parse(JSON.stringify(row));
      // this.formOption.lineId = this.formOption.lineId ? String(this.formOption.lineId) : '-1'
      // this.formOption.stationId = this.formOption.stationId ? String(this.formOption.stationId) : '-1'
      // this.formOption.level = String(this.formOption.level)
      // this.getStationData(this.formOption.lineId)
      // this.levelModalData = this.getCurrentLevel()
      this.title = '编辑应用'
      this.showModal = true
    },
    delClick (row) {
      this.rowObj = row
      this.commonTitle = '确认删除'
      this.activeColor = '#E92E2E'
      this.activeClass = ''
      this.modalTitle = '只能删除没有关联设备类型和仪表类型的应用，删除不影响已产生的操作和记录。'
      this.modalStatus = true
    },
    modalChange (modalStatus) {
     if (!modalStatus) {
      this.$refs.formOption.resetFields();
     }
    },
    modalDetailChange (val) {
     	if (!val) {
        this.detailParams.pageNum = 1
        if (this.currentModalTabs == '关联设备类型') {      
          document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
        }
      }
    },
    modalOk (formName) {
      let params = JSON.parse(JSON.stringify(this.formOption)) //把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决方法
      // params.lineId = params.lineId == '-1' ? null:params.lineId
      // params.stationId = params.stationId == '-1' ? null:params.stationId
      // params.stationName = params.stationName == '站点' ? null:params.stationName
      if (this.title == '新增应用') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$post('metroapi/application/addApp', params).then(res=>{
              if ( res.httpCode == 1 ){
                this.showModal = false
                this.$Message.info(res.msg)
                this.getTableData()
              } else {
                this.$Message.info(res.msg)
              }
            })
          } else {
            this.showModal = true
          }
       })
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // params.lineName = params.lineName == '/' ? null:params.lineName
            // params.stationName = params.stationName == '/' ? null:params.stationName
            this.$post('metroapi/application/addApp', params).then(res=>{
              if (res.httpCode == 1 ){
                this.showModal = false
                this.$Message.info(res.msg)
                this.getTableData()
              } else {
                this.$Message.info(res.msg)
              }
            })
          } else {
            this.showModal = true
          }
       })
      }
    },
    modalCancel () {
      this.showModal = false
    },
    commonOk () {
      let params = {
        applicationId: this.rowObj.id
      }
      this.delData(params)
    },
    commonCancel () {
      this.modalStatus = false
    },
    // 删除
    delData (params) {
      this.$post('metroapi/application/deleteApp',params).then(res=>{
        if (res.httpCode == 1 ){
          this.modalStatus = false
          this.$Message.info(res.msg)
          this.getTableData()
        } else {
          this.$Message.info(res.msg)
        }
      })
    },
    tabsClick (name) {
       // this.equipDetail (this.rowObj)
      this.currentModalTabs = name
      if (this.currentModalTabs == '关联设备类型') {
        this.detailParams.applicationId = this.rowObj.id
        this.$nextTick(() => {
           this.detailParams.pageNum = 1
           document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
           this.$refs.detailTable.getChartsDetail(this.detailParams)
        });
      }
    },
    // equipDetail (row) {
    //   this.modalLoading = true
    //   let params = {
    //     pageNum: 1,
    //     pageSize: 9999,
    //     applicationId: row.id
    //   }
    //   this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
    //     this.modalLoading = false
    //       if ( res.httpCode == 1 ){
    //         this.equipTableData = res.data.data
    //       } else {
    //         this.equipTableData = []
    //       }
    //     })
    // },
  }
};
</script>
<style scoped lang="stylus">
.content-main-manage {
  position: relative;
  overflow: hidden;
}
.search-list {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.search-left {
  display: flex;
  align-items: center;
   .ivu-select {
     width: 150px;
     height: 32px;
   }
   .ivu-select-single .ivu-select-selection {
     height: 100%;
   }
    >>> .ivu-input {
     width: 155px;
     height: 32px;
   }
}
.manage-main-center {
  width: 100%;
  height: calc(100% - 150px);
}
.common-table {
  max-height: 100%;
}
>>> .common-table .ivu-table th {
  height: 53px;
 }
 >>> .common-table .ivu-table td {
  height: 53px;
 }
  >>> .common-table .ivu-spin-fix {
   top: 53px;
 }
  >>> .app-table .ivu-spin-fix {
   height: calc(100vh - 355px);
 }
 >>> .common-table .ivu-table-tip {
  background: url('../../../assets/images/noData.png') no-repeat center;
}
>>> .common-table .ivu-table-tip table {
 display: none;
}
>>> .app-table .ivu-table-tip {
   height: calc(100vh - 355px);
 }
 >>> .modal-table {
   overflow: auto !important;
 }
 >>> .modal-table .ivu-spin-fix {
   height: 200px;
 }
  >>> .modal-table .ivu-table-tip {
   height: 200px;
 }
.common-page {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
}
.common-page-total {
  color: #fff;
  padding-right: 10px;
  font-size: 14px;
  span {
    color #409EFF;
  }
}
>>> .modal-tabs-item {
  margin-top: 10px;
}
// >>> .common-modal .ivu-modal-body {
//   min-height: 243px;
// }
>>> .common-modal-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 15px;
  border-right: 1px solid #21437B;
}
>>> .modal-content-item {
  width: 100%;
  display: flex;
}
// >>> .item-especial {
//   width: 100%;
// }
>>> .modal-content-item-name {
  width: 50%;
  height: 45px;
  line-height: 45px;
  background: #13305F;
  border: 1px solid #21437B;
  border-bottom: none;
  border-right: none;
  font-size: 14px;
  color: #F5F5F5;
  padding-left: 20px;
}
>>> .modal-content-item-value {
  width: 50%;
  height: 45px;
  line-height: 45px;
  background: #06214D;
  border: 1px solid #21437B;
  border-bottom: none;
  border-right: none;
  font-size: 14px;
  color: #F5F5F5;
  padding-left: 20px;
}
>>> .item-especial .modal-content-item-name{
  border-bottom: 1px solid #21437B;
}
>>> .item-especial .modal-content-item-value{
  border-bottom: 1px solid #21437B;
}
>>> .modal-content-item-value .ivu-tooltip {
  width: 100%;
}
>>> .modal-content-item-value .ivu-tooltip-rel {
  overflow: hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
}
</style>