index.vue 8.82 KB
/**
* @Description: 文件服务-站点服务规则
* @author wx
* @date 2022/09/19
*/
<template>
  <div>
    <dee-up-table
      ref="multipleTable"
      table-height="auto"
      selection-row
      :index-row="indexRow"
      :columns="tableColums"
      :data="tableData"
      tooltip-effect="light"
      @selection-change="selectionChange"
    >
      <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
    </dee-up-table>
    <dee-dialog
      :dialog-visible="dialogVisible"
      :title="form.id ? '编辑规则': '添加规则'"
      width="580px"
      @handleClose="handleClose"
    >
      <dee-form
        ref="AddForm"
        :form="form"
        :form-data="formData"
        form-btn-position="center"
        :rules="formRules"
        :inline="true"
      >
        <span style="display:flex">
          <el-button
            type="primary"
            class="searchBtn"
            @click="handleSubmit"
          >确定</el-button>

          <el-button
            class="searchBtn"
            @click="handleClose"
          >取消</el-button>
        </span>
      </dee-form>
    </dee-dialog>
  </div>
</template>
<script>
import { getTripleOrgs } from '@/api/organ'
export default {
  name: 'SiteRule',
  componentName: '站点规则',
  components: { },
  props: {
    basicData: {
      type: Object,
      default: () => null
    },
    permissions: {
      type: [Object, Array],
      default: () => null
    }
  },
  data() {
    const that = this
    return {
      dialogVisible: false,
      index: 0,
      indexRow: {
        title: '序号',
        align: 'center',
        width: '70'
      },
      tableColums: [
        { title: '操作', key: 'operate', align: 'center', hideTip: true, component: {
          show: true,
          name: 'EditTableRow',
          props: {
            btns: [
              {
                operation: '编辑',
                handleClick: (row, index) => {
                  this.edit(row)
                },
                icon: '/icons/c-edit.png',
                showFun: (row) => {
                  return true
                }
              }
            ]
          }
        }, minWidth: 100 },
        { title: '策略类型', key: 'id', align: 'center', hideTip: true, minWidth: 110, formatter(row, column) {
          return that.form.type === 1 ? '组织' : 'IP'
        } },
        { title: '策略内容', key: 'source.name', align: 'center', hideTip: true, minWidth: 260, formatter(row, column) {
          return that.form.type === 1 ? row.source.name : row.ipMatchRoles
        } }
      ],
      tableData: [],
      tools: [{
        name: '添加',
        icon: '/icons/c-add.png',
        handler: {
          click: () => {
            this.handleAdd()
          }
        }
      },
      {
        name: '移除',
        icon: '/icons/c-creatbackups.png',
        handler: {
          click: () => {
            this.handleRemove()
          }
        }
      }],
      form: {},
      formRules: {
        sourceIdArr: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        ipMatchRoles: [
          { required: true, message: '请填写', trigger: 'blur' }
        ]
      },
      tripleOrgs: [],
      selectionRow: []
    }
  },
  computed: {
    formData() {
      const arr = [{
        split: 1,
        data: [
          {
            key: 'type',
            title: '策略类型',
            component: {
              name: 'el-select',
              disabled: true,
              options: [{
                label: '组织',
                value: 1
              }, {
                label: 'IP',
                value: 2
              }]
            }
          },
          {
            key: 'ipMatchRoles',
            title: '策略内容',
            hidden: this.form.type === 1,
            component: {
              name: 'el-input',
              placeholder: '多个IP采用英文分号区隔'
            }
          },
          {
            key: 'sourceIdArr',
            title: '策略内容',
            hidden: this.form.type === 2,
            component: {
              name: 'el-select',
              multiple: true,
              options: this.tripleOrgs
            }
          }
        ]
      }]
      arr[0].data = arr[0].data.filter(r => { return !r.hidden })
      return arr
    }
  },
  watch: {
    basicData: {
      immediate: true,
      deep: true,
      handler: function(val) {
        if (val && val.id) {
          this.index++
          this.getRulesType()
        }
      }
    }

  },
  created() {
  },
  mounted() {
  },
  methods: {
    selectionChange(val) {
      this.selectionRow = val
    },
    getRulesType() {
      const params = {
        'pageFrom': 1,
        'pageSize': 10,
        'searchItems': {
          'items': [
            {
              'fieldName': 'configKey',
              'operator': 'EQ',
              'value': 'DFSSitePloyModel'
            }
          ],
          'operator': 'AND'
        }
      }

      this.$api.searchApi('SystemConfig', params).then(res => {
        if (res.items.content.length && res.items.content[0].enable) {
          if (res.items.content[0].configValue === 'GROUP') {
            this.$set(this.form, 'type', 1)
            this.getTripleOrgs()
            this.getTableData()
          } else {
            this.$set(this.form, 'type', 2)
            this.getTableData()
          }
        }
      })
    },
    getTripleOrgs() {
      getTripleOrgs().then(res => {
        this.tripleOrgs = res.items.map(r => {
          return {
            label: r.name,
            value: r.id
          }
        })
      })
    },
    getTableData() {
      const params = {
        'openProps': [
          {
            'name': 'source',
            'pageFrom': 1,
            'pageSize': 9999
          }
        ],
        'sortItem': [
          {
            'fieldName': 'modifyTime',
            'sortOrder': 'desc'
          }
        ],
        searchItems: {
          'operator': 'AND',
          'items': [
            {
              'fieldName': this.form.type === 1 ? 'targetId' : 'repoSiteId',
              'operator': 'EQ',
              'value': this.basicData.id
            }
          ]
        }
      }
      const modelName = this.form.type === 1 ? 'RepoSitePloyGroup' : 'RepoSitePloyIP'
      this.$api.searchApi(modelName, params).then(res => {
        this.tableData = res.items.content || []
      })
    },
    handleAdd() {
      this.form = {
        type: this.form.type
      }
      this.dialogVisible = true
    },
    edit(row) {
      this.form = {
        ...this.form,
        ...row,
        sourceIdArr: [row.sourceId]
      }
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleSubmit() {
      this.$refs['AddForm'].$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.type === 1) {
            const params = this.form.sourceIdArr.map(r => {
              return {
                id: this.form.sourceIdArr.length === 1 || this.form.sourceId === r ? this.form.id : '',
                operator: this.form.sourceIdArr.length === 1 || this.form.sourceId === r ? 'MODIFY' : 'ADD',
                'targetId': this.basicData.id,
                'targetIdType': 'RepoSite',
                'sourceId': r,
                'sourceIdType': 'DxOrganization'
              }
            })
            this.$api.recursion('RepoSitePloyGroup', params, true).then(res => {
              this.getTableData()
              this.$utils.showMessageSuccess(this.form.id ? '编辑成功' : '添加成功')
              this.handleClose()
            })
          } else {
            const params = {
              id: this.form.id,
              'repoSiteId': this.basicData.id,
              'ipMatchRoles': this.form.ipMatchRoles
            }
            const fun = this.form.id ? this.$api.edit : this.$api.recursion
            fun('RepoSitePloyIP', params).then(res => {
              this.getTableData()
              this.$utils.showMessageSuccess(this.form.id ? '编辑成功' : '添加成功')
              this.handleClose()
            })
          }
        }
      })
    },
    handleRemove() {
      if (!this.selectionRow.length) {
        this.$utils.showMessageError('请先选择需要删除的数据')
        return
      }
      this.$utils.showConfirm(
        '你是否确定删除选中的数据吗?',
        '提示',
        'warning',
        '确定',
        '取消',
        () => {
          const params = this.selectionRow.map(r => r.id)
          const modelName = this.form.type === 1 ? 'RepoSitePloyGroup' : 'RepoSitePloyIP'
          this.$api.batchDelete(modelName, params.join(',')).then(res => {
            this.$utils.showMessageSuccess('删除成功')
            this.getTableData()
          })
        }
      )
    }
  }
}
</script>

<style lang="scss" >

</style>