提交字典，参数设置，超龄查询

Alan

2021-02-20 813d138109177eaec095c9e2bf5176dbb09ee07a

提交字典，参数设置，超龄查询

 src/router/index.js

@@ -59,6 +59,20 @@
    ]
  },
  {
    path: '/dictItem',
    component: Layout,
    redirect: '/dictItem/Index',
    hidden: true,
    children: [
      {
        path: 'Index/:dicId(\\d+)',
        component: (resolve) => require(['@/views/dictItem/Index'], resolve),
        name: 'Data',
        meta: { title: '字典数据', icon: '' }
      }
    ]
  },
  {
    path: '/error',
    component: Layout,
    redirect: 'noRedirect',

 src/views/dashboard/index.vue

@@ -61,7 +61,7 @@
      </el-col>
      <el-col :span="4">
        <el-card shadow="always" class="card-info" @click.native="showXzyg('超龄员工人数','5')">
          <p class="card-number">{{ this.total.lsyg }}</p>
          <p class="card-number">{{ this.total.clyg }}</p>
          <p>超龄员工人数</p>
        </el-card>
      </el-col>
@@ -284,6 +284,7 @@
        lsyg: 0,
        zclz: 0,
        zdlz: 0,
        clyg: 0,
        gsct: 0,
        xjyg: 0,
        lzyg: 0,
@@ -536,6 +537,7 @@
      this.total.syj = data.syj
      this.total.ygtj = data.ygtj
      this.total.sfz = data.sfz
      this.total.clyg = data.clyg
      this.total.ygtg = data.ygtg
      this.total.bljl = data.bljl
    }

 src/views/dashboard/onTheJobUser.vue

@@ -34,6 +34,7 @@
        <el-table-column prop="reason" label="辞职事由" width="180" />
        <el-table-column prop="reporter" label="汇报人" width="180" />
        <el-table-column prop="sexName" label="性别" width="50" />
        <el-table-column prop="age" label="年龄" width="50" />
        <el-table-column prop="nationName" label="民族" width="100" />
        <el-table-column prop="certificateNumb" label="身份证号码" width="180" />
        <el-table-column prop="certificateValidity" label="身份证号码有效期" width="180" />

 src/views/dictItem/Index.vue

New file
@@ -0,0 +1,197 @@
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParams.dicItemName" placeholder="字典数据名称" class="filter-item search-item" />
      <el-button class="filter-item" type="primary" @click="search">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" type="success" @click="reset">
        {{ $t('table.reset') }}
      </el-button>
      <el-button class="filter-item" type="primary" @click.native="add">
        {{ $t('table.add') }}
      </el-button>
      <el-button class="el-icon-delete table-operation" style="color: #f50;" @click.native="batchDelete">
        {{ $t('table.delete') }}
      </el-button>
    </div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%;"
      :highlight-current-row="true"
      @selection-change="onSelectChange"
    >
      <el-table-column type="selection" align="center" width="40px" />
      <el-table-column v-if="fsnumShow" label="" prop="dicItemId" :show-overflow-tooltip="false" align="center" />
      <el-table-column label="字典项名称" prop="dicItemName" :show-overflow-tooltip="true" align="center" min-width="100px" />
      <el-table-column label="字典项代码" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.dicItemCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="字典项说明" prop="dicItemDescribe" :show-overflow-tooltip="true" align="center" min-width="170px" />
      <el-table-column label="字典代码" prop="dicCode" :show-overflow-tooltip="true" align="center" min-width="170px" />
      <el-table-column :label="$t('table.operation')" align="center" min-width="150px" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="{row}">
          <i class="el-icon-setting table-operation" style="color: #2db7f5;" @click="edit(row)" />
          <i class="el-icon-delete table-operation" style="color: #f50;" @click="singleDelete(row)" />
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="pagination.num" :limit.sync="pagination.size" @pagination="search" />
    <dic-edit
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :title="dialog.title"
      :type="dialog.type"
      @close="editClose"
      @success="editSuccess"
    />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import dicEdit from './dicEdit'
export default {
  name: 'Index',
  components: { Pagination, dicEdit },
  filters: {
    approveFilter(status) {
      const map = {
        1: 'success',
        0: 'danger'
      }
      return map[status]
    }
  },
  data() {
    return {
      fsnumShow: false,
      dialog: {
        isVisible: false,
        title: '',
        type: ''
      },
      tableKey: 0,
      loading: false,
      list: null,
      total: 0,
      queryParams: {},
      selection: [],
      pagination: {
        size: 10,
        num: 1
      }
    }
  },
  created() {
    const dicId = this.$route.params && this.$route.params.dicId
    this.queryParams.dicId = dicId
    this.search()
  },
  methods: {
    transApprove(v) {
      switch (v) {
        case 0:
          return 'false'
        case 1:
          return 'true'
        default:
          return ''
      }
    },
    editSuccess() {
      this.search()
    },
    editClose() {
      this.dialog.isVisible = false
    },
    onSelectChange(selection) {
      this.selection = selection
    },
    add() {
      debugger
      this.$refs.edit.setaddDicItem(this.queryParams.dicId)
      this.dialog.title = this.$t('common.add')
      this.dialog.isVisible = true
      this.dialog.type = 'add'
    },
    edit(row) {
      this.$refs.edit.setdicItem(row)
      this.dialog.title = this.$t('common.edit')
      this.dialog.isVisible = true
      this.dialog.type = 'edit'
    },
    batchDelete() {
      if (!this.selection.length) {
        this.$message({
          message: this.$t('tips.noDataSelected'),
          type: 'warning'
        })
        return
      }
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        debugger
        const dicItemId = []
        this.selection.forEach((c) => {
          dicItemId.push(c.dicItemId)
        })
        this.delete(dicItemId)
      }).catch(() => {
        this.clearSelections()
      })
    },
    singleDelete(row) {
      this.$refs.table.toggleRowSelection(row, true)
      this.delete(row.dicItemId)
    },
    delete(ids) {
      this.loading = true
      this.$delete(`system/dicItem/${ids}`).then(() => {
        this.$message({
          message: this.$t('tips.deleteSuccess'),
          type: 'success'
        })
        this.search()
      })
    },
    clearSelections() {
      this.$refs.table.clearSelection()
    },
    search() {
      this.fetch({
        ...this.queryParams
      })
    },
    reset() {
      this.queryParams = {}
      this.search()
    },

    fetch(params = {}) {
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      this.loading = true
      this.$get('system/dicItem/list', {
        ...params
      }).then((r) => {
        const data = r.data.data
        this.total = data.total
        this.list = data.rows
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

 src/views/dictItem/dicEdit.vue

New file
@@ -0,0 +1,160 @@
<template>
  <el-dialog
    :title="title"
    :width="width"
    top="50px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isVisible"
  >
    <el-form ref="form" :model="dicItem" :rules="rules" label-dic-item="right" label-width="165px">
      <el-form-item label="字典项名称" prop="dicItemName">
        <el-input v-model="dicItem.dicItemName" />
      </el-form-item>
      <el-form-item label="字典项代码" prop="dicItemCode">
        <el-input v-model="dicItem.dicItemCode" />
      </el-form-item>
      <el-form-item label="字典项说明" prop="dicItemDescribe">
        <el-input v-model="dicItem.dicItemDescribe" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="warning" plain :loading="buttonLoading" @click="isVisible = false">
        {{ $t('common.cancel') }}
      </el-button>
      <el-button type="primary" plain :loading="buttonLoading" @click="submitForm">
        {{ $t('common.confirm') }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'DicItemEdit',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      screenWidth: 0,
      buttonLoading: false,
      width: this.initWidth(),
      dicItem: this.initdicItem(),
      rules: {
        dicItemName: [
          { required: true, message: this.$t('rules.require'), trigger: 'blur' }
        ],
        dicItemCode: [
          { required: true, message: this.$t('rules.require'), trigger: 'blur' }
        ],
        authorizedGrantTypes: { required: true, message: this.$t('rules.require'), trigger: 'blur' }
      },
      grantTypes: [
        { type: 'refresh_token' },
        { type: 'authorization_code' },
        { type: 'dicItem_credentials' },
        { type: 'password' },
        { type: 'implicit' }
      ]
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.close()
        this.reset()
      }
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.width = this.initWidth()
      })()
    }
  },
  methods: {
    initWidth() {
      this.screenWidth = document.body.dicItemWidth
      if (this.screenWidth < 991) {
        return '90%'
      } else if (this.screenWidth < 1400) {
        return '45%'
      } else {
        return '800px'
      }
    },
    initdicItem() {
      return {
        dicItemId: '',
        dicItemName: '',
        dicItemCode: '',
        dicId: '',
        dicItemDescribe: ''
      }
    },
    setaddDicItem(val) {
      debugger
      this.dicItem.dicId = val
    },
    setdicItem(val) {
      this.dicItem = { ...val }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          if (this.type === 'add') {
            // create
            this.$post('system/dicItem', { ...this.dicItem }).then(() => {
              this.buttonLoading = false
              this.isVisible = false
              this.$message({
                message: this.$t('tips.createSuccess'),
                type: 'success'
              })
              this.$emit('success')
            })
          } else {
            // update
            this.$put('system/dicItem', { ...this.dicItem }).then(() => {
              debugger
              this.buttonLoading = false
              this.isVisible = false
              this.$message({
                message: this.$t('tips.updateSuccess'),
                type: 'success'
              })
              this.$emit('success')
            })
          }
        } else {
          return false
        }
      })
    },
    close() {
      this.$emit('close')
    },
    reset() {
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
      this.dicItem = this.initdicItem()
    }
  }
}
</script>

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

New file
@@ -0,0 +1,200 @@
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParams.dicName" placeholder="字典名称" class="filter-item search-item" />
      <el-button class="filter-item" type="primary" @click="search">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" type="success" @click="reset">
        {{ $t('table.reset') }}
      </el-button>
      <el-button v-has-permission="['dic:add']" class="filter-item" type="primary" @click.native="add">
        {{ $t('table.add') }}
      </el-button>
      <el-button v-has-permission="['dic:delete']" class="el-icon-delete table-operation" style="color: #f50;" @click.native="batchDelete">
        {{ $t('table.delete') }}
      </el-button>
    </div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%;"
      :highlight-current-row="true"
      @selection-change="onSelectChange"
    >
      <el-table-column type="selection" align="center" width="40px" />
      <el-table-column v-if="fsnumShow" label="" prop="dicId" :show-overflow-tooltip="false" align="center" />
      <el-table-column label="字典名称" prop="dicName" :show-overflow-tooltip="true" align="center" min-width="100px" />
      <el-table-column label="字典代码" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <router-link :to="'/dictItem/Index/' + scope.row.dicId" class="link-type">
            <el-dropdown-item>
              <span>{{ scope.row.dicCode }}</span>
            </el-dropdown-item>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="字典说明" prop="dicDescribe" :show-overflow-tooltip="true" align="center" min-width="170px" />
      <el-table-column :label="$t('table.operation')" align="center" min-width="150px" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="{row}">
          <i v-hasPermission="['dic:update']" class="el-icon-setting table-operation" style="color: #2db7f5;" @click="edit(row)" />
          <i v-hasPermission="['dic:delete']" class="el-icon-delete table-operation" style="color: #f50;" @click="singleDelete(row)" />
          <el-link v-has-no-permission="['dic:update','dic:delete']" class="no-perm">
            {{ $t('tips.noPermission') }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="pagination.num" :limit.sync="pagination.size" @pagination="search" />
    <dic-edit
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :title="dialog.title"
      :type="dialog.type"
      @close="editClose"
      @success="editSuccess"
    />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import dicEdit from './dicEdit'
export default {
  name: 'ClientManage',
  components: { Pagination, dicEdit },
  filters: {
    approveFilter(status) {
      const map = {
        1: 'success',
        0: 'danger'
      }
      return map[status]
    }
  },
  data() {
    return {
      fsnumShow: false,
      dialog: {
        isVisible: false,
        title: '',
        type: ''
      },
      tableKey: 0,
      loading: false,
      list: null,
      total: 0,
      queryParams: {},
      selection: [],
      pagination: {
        size: 10,
        num: 1
      }
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    transApprove(v) {
      switch (v) {
        case 0:
          return 'false'
        case 1:
          return 'true'
        default:
          return ''
      }
    },
    editSuccess() {
      this.search()
    },
    editClose() {
      this.dialog.isVisible = false
    },
    onSelectChange(selection) {
      this.selection = selection
    },
    add() {
      this.dialog.title = this.$t('common.add')
      this.dialog.isVisible = true
      this.dialog.type = 'add'
    },
    edit(row) {
      this.$refs.edit.setdic(row)
      this.dialog.title = this.$t('common.edit')
      this.dialog.isVisible = true
      this.dialog.type = 'edit'
    },
    batchDelete() {
      if (!this.selection.length) {
        this.$message({
          message: this.$t('tips.noDataSelected'),
          type: 'warning'
        })
        return
      }
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        debugger
        const dicId = []
        this.selection.forEach((c) => {
          dicId.push(c.dicId)
        })
        this.delete(dicId)
      }).catch(() => {
        this.clearSelections()
      })
    },
    singleDelete(row) {
      debugger
      this.$refs.table.toggleRowSelection(row, true)
      this.delete(row.dicId)
    },
    delete(ids) {
      this.loading = true
      this.$delete(`system/dic/${ids}`).then(() => {
        this.$message({
          message: this.$t('tips.deleteSuccess'),
          type: 'success'
        })
        this.search()
      })
    },
    clearSelections() {
      this.$refs.table.clearSelection()
    },
    search() {
      this.fetch({
        ...this.queryParams
      })
    },
    reset() {
      this.queryParams = {}
      this.search()
    },

    fetch(params = {}) {
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      this.loading = true
      this.$get('system/dic/list', {
        ...params
      }).then((r) => {
        const data = r.data.data
        this.total = data.total
        this.list = data.rows
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

 src/views/febs/system/dict/dicEdit.vue

New file
@@ -0,0 +1,155 @@
<template>
  <el-dialog
    :title="title"
    :width="width"
    top="50px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isVisible"
  >
    <el-form ref="form" :model="dic" :rules="rules" label-dic="right" label-width="165px">
      <el-form-item label="字典名称" prop="dicName">
        <el-input v-model="dic.dicName" />
      </el-form-item>
      <el-form-item label="字典编码" prop="dicCode">
        <el-input v-model="dic.dicCode" />
      </el-form-item>
      <el-form-item label="字典备注" prop="dicDescribe">
        <el-input v-model="dic.dicDescribe" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="warning" plain :loading="buttonLoading" @click="isVisible = false">
        {{ $t('common.cancel') }}
      </el-button>
      <el-button type="primary" plain :loading="buttonLoading" @click="submitForm">
        {{ $t('common.confirm') }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'DicEdit',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      screenWidth: 0,
      buttonLoading: false,
      width: this.initWidth(),
      dic: this.initdic(),
      rules: {
        dicName: [
          { required: true, message: this.$t('rules.require'), trigger: 'blur' }
        ],
        dicCode: [
          { required: true, message: this.$t('rules.require'), trigger: 'blur' }
        ],
        authorizedGrantTypes: { required: true, message: this.$t('rules.require'), trigger: 'blur' }
      },
      grantTypes: [
        { type: 'refresh_token' },
        { type: 'authorization_code' },
        { type: 'dic_credentials' },
        { type: 'password' },
        { type: 'implicit' }
      ]
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.close()
        this.reset()
      }
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.width = this.initWidth()
      })()
    }
  },
  methods: {
    initWidth() {
      this.screenWidth = document.body.dicWidth
      if (this.screenWidth < 991) {
        return '90%'
      } else if (this.screenWidth < 1400) {
        return '45%'
      } else {
        return '800px'
      }
    },
    initdic() {
      return {
        dicId: '',
        dicName: '',
        dicCode: '',
        dicDescribe: ''
      }
    },
    setdic(val) {
      this.dic = { ...val }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          if (this.type === 'add') {
            // create
            this.$post('system/dic', { ...this.dic }).then(() => {
              this.buttonLoading = false
              this.isVisible = false
              this.$message({
                message: this.$t('tips.createSuccess'),
                type: 'success'
              })
              this.$emit('success')
            })
          } else {
            // update
            this.$put('system/dic', { ...this.dic }).then(() => {
              debugger
              this.buttonLoading = false
              this.isVisible = false
              this.$message({
                message: this.$t('tips.updateSuccess'),
                type: 'success'
              })
              this.$emit('success')
            })
          }
        } else {
          return false
        }
      })
    },
    close() {
      this.$emit('close')
    },
    reset() {
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
      this.dic = this.initdic()
    }
  }
}
</script>

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

New file
@@ -0,0 +1,188 @@
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParams.configName" placeholder="参数名称" class="filter-item search-item" />
      <el-button class="filter-item" type="primary" @click="search">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" type="success" @click="reset">
        {{ $t('table.reset') }}
      </el-button>
      <el-button v-has-permission="['sysConfig:add']" class="filter-item" type="primary" @click.native="add">
        {{ $t('table.add') }}
      </el-button>
      <el-button v-has-permission="['sysConfig:delete']" class="el-icon-delete table-operation" style="color: #f50;" @click.native="batchDelete">
        {{ $t('table.delete') }}
      </el-button>
    </div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%;"
      :highlight-current-row="true"
      @selection-change="onSelectChange"
    >
      <el-table-column type="selection" align="center" width="40px" />
      <el-table-column v-if="fsnumShow" label="" prop="config_id" :show-overflow-tooltip="false" align="center" />
      <el-table-column label="参数名称" prop="configName" :show-overflow-tooltip="true" align="center" min-width="100px" />
      <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
      <el-table-column label="参数键值" prop="configValue" :show-overflow-tooltip="true" align="center" min-width="100px" />
      <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" align="center" min-width="170px" />
      <el-table-column :label="$t('table.operation')" align="center" min-width="150px" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="{row}">
          <i v-hasPermission="['sysConfig:update']" class="el-icon-setting table-operation" style="color: #2db7f5;" @click="edit(row)" />
          <i v-hasPermission="['sysConfig:delete']" class="el-icon-delete table-operation" style="color: #f50;" @click="singleDelete(row)" />
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="pagination.num" :limit.sync="pagination.size" @pagination="search" />
    <config-edit
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :title="dialog.title"
      :type="dialog.type"
      @close="editClose"
      @success="editSuccess"
    />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import configEdit from './configEdit'
export default {
  name: 'Index',
  components: { Pagination, configEdit },
  filters: {
    approveFilter(status) {
      const map = {
        1: 'success',
        0: 'danger'
      }
      return map[status]
    }
  },
  data() {
    return {
      fsnumShow: false,
      dialog: {
        isVisible: false,
        title: '',
        type: ''
      },
      tableKey: 0,
      loading: false,
      list: null,
      total: 0,
      queryParams: {},
      selection: [],
      pagination: {
        size: 10,
        num: 1
      }
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    transApprove(v) {
      switch (v) {
        case 0:
          return 'false'
        case 1:
          return 'true'
        default:
          return ''
      }
    },
    editSuccess() {
      this.search()
    },
    editClose() {
      this.dialog.isVisible = false
    },
    onSelectChange(selection) {
      this.selection = selection
    },
    add() {
      this.dialog.title = this.$t('common.add')
      this.dialog.isVisible = true
      this.dialog.type = 'add'
    },
    edit(row) {
      this.$refs.edit.setSysConfig(row)
      this.dialog.title = this.$t('common.edit')
      this.dialog.isVisible = true
      this.dialog.type = 'edit'
    },
    batchDelete() {
      if (!this.selection.length) {
        this.$message({
          message: this.$t('tips.noDataSelected'),
          type: 'warning'
        })
        return
      }
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        const configId = []
        this.selection.forEach((c) => {
          configId.push(c.configId)
        })
        this.delete(configId)
      }).catch(() => {
        this.clearSelections()
      })
    },
    singleDelete(row) {
      this.$refs.table.toggleRowSelection(row, true)
      this.delete(row.configId)
    },
    delete(ids) {
      this.loading = true
      this.$delete(`system/sysConfig/${ids}`).then(() => {
        this.$message({
          message: this.$t('tips.deleteSuccess'),
          type: 'success'
        })
        this.search()
      })
    },
    clearSelections() {
      this.$refs.table.clearSelection()
    },
    search() {
      this.fetch({
        ...this.queryParams
      })
    },
    reset() {
      this.queryParams = {}
      this.search()
    },

    fetch(params = {}) {
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      this.loading = true
      this.$get('system/sysConfig/list', {
        ...params
      }).then((r) => {
        const data = r.data.data
        this.total = data.total
        this.list = data.rows
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

 src/views/febs/system/sysConfig/configEdit.vue

New file
@@ -0,0 +1,162 @@
<template>
  <el-dialog
    :title="title"
    :width="width"
    top="50px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isVisible"
  >
    <el-form ref="form" :model="sysConfig" :rules="rules" label-dic="right" label-width="165px">
      <el-form-item label="参数名称" prop="configName">
        <el-input v-model="sysConfig.configName" />
      </el-form-item>
      <el-form-item label="参数键名" prop="configKey">
        <el-input v-model="sysConfig.configKey" :readonly="sysConfig.configId === '' ? false : 'readonly'" />
      </el-form-item>
      <el-form-item label="参数键值" prop="configValue">
        <el-input v-model="sysConfig.configValue" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="sysConfig.remark" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="warning" plain :loading="buttonLoading" @click="isVisible = false">
        {{ $t('common.cancel') }}
      </el-button>
      <el-button type="primary" plain :loading="buttonLoading" @click="submitForm">
        {{ $t('common.confirm') }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'DicEdit',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      screenWidth: 0,
      buttonLoading: false,
      width: this.initWidth(),
      sysConfig: this.initSysConfig(),
      rules: {
        configName: [
          { required: true, message: this.$t('rules.require'), trigger: 'blur' }
        ],
        configKey: [
          { required: true, message: this.$t('rules.require'), trigger: 'blur' }
        ],
        configValue: [
          { required: true, message: this.$t('rules.require'), trigger: 'blur' }
        ],
        authorizedGrantTypes: { required: true, message: this.$t('rules.require'), trigger: 'blur' }
      },
      grantTypes: [
        { type: 'refresh_token' },
        { type: 'authorization_code' },
        { type: 'dic_credentials' },
        { type: 'password' },
        { type: 'implicit' }
      ]
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.close()
        this.reset()
      }
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.width = this.initWidth()
      })()
    }
  },
  methods: {
    initWidth() {
      this.screenWidth = document.body.width
      if (this.screenWidth < 991) {
        return '90%'
      } else if (this.screenWidth < 1400) {
        return '45%'
      } else {
        return '800px'
      }
    },
    initSysConfig() {
      return {
        configId: '',
        configName: '',
        configKey: '',
        configValue: '',
        remark: ''
      }
    },
    setSysConfig(val) {
      this.sysConfig = { ...val }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          if (this.type === 'add') {
            // create
            this.$post('system/sysConfig', { ...this.sysConfig }).then(() => {
              this.buttonLoading = false
              this.isVisible = false
              this.$message({
                message: this.$t('tips.createSuccess'),
                type: 'success'
              })
              this.$emit('success')
            })
          } else {
            // update
            this.$put('system/sysConfig', { ...this.sysConfig }).then(() => {
              debugger
              this.buttonLoading = false
              this.isVisible = false
              this.$message({
                message: this.$t('tips.updateSuccess'),
                type: 'success'
              })
              this.$emit('success')
            })
          }
        } else {
          return false
        }
      })
    },
    close() {
      this.$emit('close')
    },
    reset() {
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
      this.sysConfig = this.initSysConfig()
    }
  }
}
</script>