nezha-nezha-fronted/nezha-fronted/src/components/common/rightBox/chartTempBox.vue

<template>
  <div v-clickoutside="{obj: editChartTemp, func: esc}" class="right-box right-box-asset">
    <div class="right-box__header">
      <div class="header__title">{{editChartTemp.id ? $t('dashboard.panel.createChartByTemp') :$t('dashboard.panel.createChartByTemp')}}</div>
      <div class="header__operation">
        <span v-cancel="{obj: editChartTemp, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
      </div>
    </div>
    <div class="right-box__container">
      <div class="container__form">
        <el-form ref="userForm" :model="editChartTemp" :rules="rules" label-position="top" label-width="120px">
          <!--type-->
          <el-form-item v-if="from !== fromRoute.endpoint" :label="$t('dashboard.panel.chartForm.varType')" prop="varType">
            <el-select id="chart-box-group"
                       v-model="editChartTemp.varType"
                       class="right-box__select"
                       clearable
                       placeholder=""
                       popper-class="right-box-select-dropdown prevent-clickoutside"
                       size="small"
                       value-key="chartType"
                       @change="varTypeChange">
              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <!--chartTemp list-->
          <el-form-item :label="$t('dashboard.panel.chartForm.pid')" prop="pid">
            <el-select id="chart-box-group"
                       v-model="editChartTemp.pid"
                       class="right-box__select" clearable
                       placeholder=""
                       popper-class="right-box-select-dropdown prevent-clickoutside"
                       size="small"
                       value-key="chartType" >
              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">
                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 选择资产，穿梭框 -->
          <template v-if="showTransfer">
            <div class="form__sub-title">{{editChartTemp.varType === 1 ? 'Asset' : 'Endpoint'}}</div>
            <nz-transfer ref="transfer"
                         :from="from"
                         :page-obj="transfer.pageObj"
                         :search-msg="transfer.searchMsg"
                         :table-data="transfer.tableData"
                         :tableTitle="transferTableTitle"
                         style="margin-bottom: 20px;"
                         @pageNo="pageNoChange"
                         @leftToRight="addAsset"
                         @rightToLeft="removeAsset"
                         @search="search">
              <template v-slot:title>Selected</template>
            </nz-transfer>
          </template>
        </el-form>
      </div>
    </div>
    <div class="right-box__footer">
      <button id="asset-edit-cancel" v-cancel="{obj: editChartTemp, func: esc}" class="footer__btn footer__btn--light">
        <span>{{$t('overall.cancel')}}</span>
      </button>
      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
        <span>{{$t('overall.save')}}</span>
      </button>
    </div>
  </div>
</template>

<script>
import nzTransfer from '@/components/common/nzTransfer'
import { fromRoute } from '@/components/common/js/constants'
export default {
  name: 'chartTemp',
  components: {
    nzTransfer
  },
  props: {
    obj: {
      type: Object
    },
    from: String
  },
  data () {
    return {
      fromRoute,
      editChartTemp: {},
      url: 'visual/panel/chart/fromTmpl',
      rules: { // 表单校验规则
        varType: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        pid: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      },
      varTypeArr: [
        { name: 'Asset', id: 1 },
        { name: 'Endpoint', id: 2 }
      ],
      chartTempArr: [],
      tableData: [],
      transfer: {
        tableData: [],
        selectedData: [],
        searchLabel: {},
        searchMsg: { // 给搜索框子组件传递的信息
          zheze_none: true,
          searchLabelList: [
            {
              id: 1,
              name: 'ID',
              type: 'input',
              label: 'id',
              disabled: false
            }, {
              id: 20,
              name: 'SN',
              type: 'input',
              label: 'sn',
              disabled: false
            }, {
              id: 21,
              name: 'Host',
              type: 'input',
              label: 'host',
              disabled: false
            }, {
              id: 22,
              name: this.$t('asset.state'),
              type: 'select',
              label: 'assetState',
              disabled: false
            }, {
              id: 23,
              name: 'pingStatus',
              type: 'select',
              label: 'pingStatus',
              disabled: false
            }, {
              id: 23,
              name: this.$t('asset.cabinet'),
              type: 'input',
              label: 'cabinetName',
              disabled: false
            }
          ]
        },
        pageObj: {
          pageNo: 1,
          pageSize: 10,
          pages: 1,
          total: 0
        }
      },
      transferTableTitle: [
        {
          label: this.$t('overall.name'),
          prop: 'name',
          show: true
        },
        {
          label: this.$t('asset.host'),
          prop: 'manageIp',
          show: true
        }
      ]
    }
  },
  watch: {
    obj: {
      deep: true,
      immediate: true,
      handler (n) {
        this.editChartTemp = JSON.parse(JSON.stringify(n))
      }
    }
  },
  mounted () {
    this.getChartTempData()
    this.getTableData()
  },
  computed: {
    showTransfer () {
      if (this.from === fromRoute.endpoint) {
        return false
      } else if (this.from === fromRoute.asset && this.editChartTemp.varType === 1) {
        return false
      }
      return true
    }
  },
  methods: {
    pageNoChange (val) {
      this.transfer.pageObj.pageNo = val
      this.getTableData()
    },
    clickOutside () {
      this.esc(false)
    },
    /* 关闭弹框 */
    esc (refresh) {
      this.prevent_opt.save = false
      this.$emit('close', refresh)
    },
    save () {
      if (this.prevent_opt.save) { return } ;
      this.prevent_opt.save = true
      if (!this.transfer.selectedData.length) {
        this.prevent_opt.save = false
        if (this.from !== fromRoute.endpoint) { // 来自endpoint时不校验
          if (this.editChartTemp.varType === 1) {
            if (this.from !== fromRoute.asset) { // 来自asset且type=1时不校验
              this.$message.error(this.$t('dashboard.panel.chartForm.selectAsset'))
            }
          } else {
            this.$message.error(this.$t('dashboard.panel.chartForm.selectEndpoint'))
          }
          return
        }
      }
      if (this.from === fromRoute.asset && this.editChartTemp.varType === 1) { // 来自asset时取assetId
        this.editChartTemp.varIds = this.obj.varIds
      } else if (this.from === fromRoute.endpoint) { // 来自endpoint时取endpointId
        this.editChartTemp.varIds = this.obj.varIds
      } else {
        this.editChartTemp.varIds = this.transfer.selectedData.map(item => item.id)
      }
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          if (this.editChartTemp.id) {
            this.$put(this.url, this.editChartTemp).then(res => {
              this.prevent_opt.save = false
              if (res.code === 200) {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.$emit('on-create-success')
                this.esc(true)
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            this.$post(this.url, this.editChartTemp).then(res => {
              this.prevent_opt.save = false
              if (res.code === 200) {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.prevent_opt.save = false
          return false
        }
      })
    },
    search (searchLabel, page) {
      this.transfer.searchLabel = JSON.parse(JSON.stringify(searchLabel))
      this.transfer.pageObj = JSON.parse(JSON.stringify(page))
      this.getTableData()
    },
    addAsset (toAdd) {
      this.transfer.selectedData = toAdd
      this.transfer.tableData.forEach(d => {
        this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
      })
    },
    removeAsset (toRemove) {
      this.transfer.selectedData = this.transfer.selectedData.filter(d => !toRemove.find(s => d.id === s.id))
      this.transfer.tableData.forEach(d => {
        this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
      })
      // dc, brand, model, type
    },
    getChartTempData () {
      this.$get('visual/panel/chart', { pageSize: -1, panelId: 0, returnChildren: 0, varType: this.editChartTemp.varType, groupId: 0 }).then(response => {
        if (response.code === 200) {
          this.chartTempArr = response.data.list
        }
      })
    },
    getTableData () {
      if (this.editChartTemp.varType === 1) {
        this.getAssetData()
      } else {
        this.getEndpointData()
      }
    },
    getAssetData () {
      this.$refs.transfer.startLoading()
      this.$get('asset/asset', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
        this.$refs.transfer.endLoading()
        if (response.code === 200) {
          this.transfer.tableData = response.data.list
          this.transfer.pageObj.total = response.data.total
          this.transfer.pageObj.pages = response.data.pages
        }
      })
    },
    getEndpointData () {
      this.$refs.transfer.startLoading()
      const idFilter = {}
      if (this.from === fromRoute.asset) {
        idFilter.assetIds = this.obj.varIds[0]
      }
      this.$get('monitor/endpoint', { ...this.transfer.searchLabel, ...this.transfer.pageObj, ...idFilter }).then(response => {
        this.$refs.transfer.endLoading()
        if (response.code === 200) {
          this.transfer.tableData = response.data.list
          this.transfer.pageObj.total = response.data.total
          this.transfer.pageObj.pages = response.data.pages
        }
      })
    },
    varTypeChange () {
      this.getChartTempData()
      this.editChartTemp.pid = ''
      // 从asset详情页进来的，varType=1时不显示asset列表，varId默认为asset的id; 从endpoint详情页进来的，varId默认为endpoint的id
      if ((this.from === fromRoute.asset && this.editChartTemp.varType === 1) || this.from === fromRoute.endpoint) {
        this.transfer.selectedData = this.obj.varIds
      } else {
        this.transfer.selectedData = []
      }
      if (this.editChartTemp.varType === 1) {
        this.transferTableTitle = [
          {
            label: this.$t('overall.name'),
            prop: 'name',
            show: true
          },
          {
            label: this.$t('asset.host'),
            prop: 'manageIp',
            show: true
          }
        ]
        this.transfer.searchMsg.searchLabelList = [
          {
            id: 1,
            name: 'ID',
            type: 'input',
            label: 'id',
            disabled: false
          }, {
            id: 20,
            name: 'SN',
            type: 'input',
            label: 'sn',
            disabled: false
          }, {
            id: 21,
            name: 'Host',
            type: 'input',
            label: 'host',
            disabled: false
          }, {
            id: 22,
            name: this.$t('asset.state'),
            type: 'select',
            label: 'assetState',
            disabled: false
          }, {
            id: 23,
            name: 'pingStatus',
            type: 'select',
            label: 'pingStatus',
            disabled: false
          }, {
            id: 23,
            name: this.$t('asset.cabinet'),
            type: 'input',
            label: 'cabinetName',
            disabled: false
          }
        ]
      } else {
        this.transferTableTitle = [
          {
            label: 'ID',
            prop: 'id',
            show: true
          },
          {
            label: this.$t('project.endpoint.name'),
            prop: 'name',
            show: true
          }
        ]
        this.transfer.searchMsg.searchLabelList = [
          {
            id: 11,
            name: 'project id',
            type: 'input',
            label: 'projectIds',
            disabled: false
          }, {
            id: 12,
            name: 'endpoint name',
            type: 'input',
            label: 'name',
            disabled: false
          },
          {
            id: 13,
            name: 'endpoint id',
            type: 'input',
            label: 'id',
            disabled: false
          }, {
            id: 34,
            name: this.$t('project.project.projectName'),
            // name: this.$t('asset.asset'),
            type: 'input',
            label: 'projectName',
            disabled: false
          }, {
            id: 35,
            name: this.$t('project.module.module'),
            // name: this.$t('asset.asset'),
            type: 'input',
            label: 'moduleName',
            disabled: false
          }]
        if (this.from !== fromRoute.asset) {
          this.transfer.searchMsg.searchLabelList.push({
            id: 14,
            name: this.$t('asset.asset'),
            type: 'query',
            label: 'query',
            disabled: false
          })
        }
      }
      this.$nextTick(() => {
        this.$refs.transfer.selectedData = []
        this.getTableData()
      })
    }
  }
}
</script>
<style lang="scss">
  @import '@/assets/css/common/rightBoxCommon.scss';
</style>