系統管理按钮样式调整

楚江漓i

2021-03-08 03d1fed9b79fab6a9df856bfe2e9ce91d803e77b

 src/views/febs/system/dept/Index.vue

@@ -5,30 +5,32 @@
        <div class="app-container">
          <div class="filter-container">
            <el-input v-model="deptName" :placeholder="$t('table.dept.deptName')" class="filter-item search-item" />
            <el-button class="filter-item" type="primary" @click="search">
            <el-button class="hr-but-all" type="primary" @click="search">
              {{ $t('table.search') }}
            </el-button>
            <el-button class="filter-item" type="success" @click="reset">
            <el-button class="hr-but-all" type="success" @click="reset">
              {{ $t('table.reset') }}
            </el-button>
            <el-dropdown v-has-any-permission="['dept:add','dept:delete','dept:export']" trigger="click" class="filter-item">
              <el-button>
                {{ $t('table.more') }}<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-has-permission="['dept:add']" @click.native="add">{{ $t('table.add') }}</el-dropdown-item>
                <el-dropdown-item v-has-permission="['dept:delete']" @click.native="deleteDept">{{ $t('table.delete') }}</el-dropdown-item>
                <el-dropdown-item v-has-permission="['dept:export']" @click.native="exportExcel">{{ $t('table.export') }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-button v-has-permission="['dept:add']" class="hr-but-all" type="success" @click.native="add">
              {{ $t('table.add') }}
            </el-button>
            <el-button v-has-permission="['dept:delete']" type="primary" @click.native="deleteDept">
              {{ $t('table.delete') }}
            </el-button>
            <el-button v-has-permission="['dept:export']" class="hr-but-all" type="success" @click.native="exportExcel">
              {{ $t('table.export') }}
            </el-button>
          </div>
          <el-tree
            ref="deptTree"
            :data="deptTree"
            :check-strictly="true"
            :check-strictly="false"
            show-checkbox
            accordion
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            highlight-current
            :filter-node-method="filterNode"
            @node-click="nodeClick"
@@ -46,6 +48,7 @@
                <treeselect
                  v-model="dept.parentId"
                  :multiple="false"

                  :options="deptTree"
                  :clear-value-text="$t('common.clear')"
                  placeholder=" "
@@ -58,16 +61,29 @@
              <el-form-item :label="$t('table.dept.orderNum')" prop="orderNum">
                <el-input-number v-model="dept.orderNum" :min="0" :max="100" @change="handleNumChange" />
              </el-form-item>
              <el-form-item label="部门性质" prop="deptType">
                <el-select v-model="dept.deptType" placeholder="请选择">
                  <el-option label="集团" value="01" />
                  <el-option label="公司" value="02" />
                  <el-option label="分(子)公司、办事处" value="03" />
                  <el-option label="部门" value="04" />
                  <el-option label="子部门" value="05" />
                  <el-option label="护卫点" value="06" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <el-card class="box-card" style="margin-top: -2rem;">
          <el-row>
            <el-col :span="24" style="text-align: right">
              <el-button type="primary" plain :loading="buttonLoading" @click="submit">{{ dept.deptId === '' ? this.$t('common.add') : this.$t('common.edit') }}</el-button>
              <el-button type="primary" plain :loading="buttonLoading" @click="submit">
                {{ dept.deptId === '' ? this.$t('common.add') : this.$t('common.edit') }}
              </el-button>
            </el-col>
          </el-row>
        </el-card>

      </el-col>
    </el-row>
  </div>
@@ -78,17 +94,29 @@

export default {
  name: 'DeptManager',
  components: { Treeselect },
  components: {
    Treeselect
  },
  data() {
    return {
      dialogShowXzgw: false,
      activeName: 'first',
      deptName: '',
      buttonLoading: false,
      deptTree: [],
      dept: this.initDept(),
      rules: {
        deptName: [
          { required: true, message: this.$t('rules.require'), trigger: 'blur' },
          { min: 3, max: 10, message: this.$t('rules.range3to10'), trigger: 'blur' }
        deptName: [{
          required: true,
          message: this.$t('rules.require'),
          trigger: 'blur'
        },
        {
          min: 1,
          max: 10,
          message: this.$t('rules.range3to10'),
          trigger: 'blur'
        }
        ]
      }
    }
@@ -102,6 +130,8 @@
        deptId: '',
        deptName: '',
        parentId: null,
        deptType: '',
        deptFunction: '',
        orderNum: 0
      }
    },
@@ -130,6 +160,8 @@
      this.dept.orderNum = data.orderNum
      this.dept.deptName = data.label
      this.dept.deptId = data.id
      this.dept.deptType = data.deptType
      this.dept.deptFunction = data.deptFunction
      this.$refs.form.clearValidate()
    },
    add() {
@@ -179,7 +211,9 @@
          this.buttonLoading = true
          this.dept.createTime = this.dept.modifyTime = null
          if (this.dept.deptId) {
            this.$put('system/dept', { ...this.dept }).then(() => {
            this.$put('system/dept', {
              ...this.dept
            }).then(() => {
              this.buttonLoading = false
              this.$message({
                message: this.$t('tips.updateSuccess'),
@@ -188,7 +222,9 @@
              this.reset()
            })
          } else {
            this.$post('system/dept', { ...this.dept }).then(() => {
            this.$post('system/dept', {
              ...this.dept
            }).then(() => {
              this.buttonLoading = false
              this.$message({
                message: this.$t('tips.createSuccess'),
@@ -211,26 +247,30 @@
}
</script>
<style lang="scss" scoped>
  .dept {
    margin: 10px;
    .app-container {
      margin: 0 0 10px 0 !important;
    }
.dept {
  margin: 10px;

  .app-container {
    margin: 0 0 10px 0 !important;
  }
  .el-card.is-always-shadow {
    box-shadow: none;
}

.el-card.is-always-shadow {
  box-shadow: none;
}

.el-card {
  border-radius: 0;
  border: none;

  .el-card__header {
    padding: 10px 20px !important;
    border-bottom: 1px solid #f1f1f1 !important;
  }
  .el-card {
    border-radius: 0;
    border: none;
    .el-card__header {
      padding: 10px 20px !important;
      border-bottom: 1px solid #f1f1f1 !important;
    }
  }
}
</style>
<style lang="scss">
  .vue-treeselect__menu {
    max-height: 165px !important;
  }
.vue-treeselect__menu {
  max-height: 165px !important;
}
</style>