auth-web/src/pages/permission-selfhelp-manage/index.vue

<!--
权限自助管理
@Author: linqian
@Date: 2021-07-07
-->
<template>
  <div>
    <!-- 搜索项 -->
    <search-bar ref="searchbar" :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
    <!-- 操作栏 -->
    <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
    <!-- 表格 -->
    <new-table ref="table" :tableUrl="tableUrl" :tableHeader="tableHeader" :condition="condition">
      <dg-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <div class="u-table__operation">
            <el-tooltip content="详情" effect="dark" placement="top-end">
              <i :class="'详情' | optIcon" @click="handleViewDetail(row)"></i>
            </el-tooltip>
            <el-tooltip content="编辑" effect="dark" placement="top-end" v-if="row.showEdit">
              <i :class="'编辑' | optIcon" @click="handleApplyPermission(row.applyOrdNo)"></i>
            </el-tooltip>
            <el-tooltip content="撤回" effect="dark" placement="top-end" v-if="row.showRecall">
              <i :class="'撤回' | optIcon" @click="handleRecall(row)"></i>
            </el-tooltip>
            <el-tooltip content="删除" effect="dark" placement="top-end">
              <i :class="'删除' | optIcon" @click="handleDelete(row)"></i>
            </el-tooltip>
          </div>
        </template>
      </dg-table-column>
    </new-table>
  </div>
</template>
<script>
import newTable from '@/pages/common/new-table';
import { tableHeader } from './DataConfig';
import { tableUrl, delApply, recallApply } from '@/api/permission-selfhelp-manage';
import operateBar from '@/components/operate-bar';
import searchBar from '@/components/search-bar';
import { searchOpt } from '@/mixins/page-opt';
export default {
  components: {
    newTable,
    operateBar,
    searchBar
  },
  mixins: [searchOpt],
  data() {
    return {
      tableUrl,
      tableHeader,
      conditionForm: [
        {
          label: '流程标题',
          name: 'flowTitle',
          op: 'like',
          value: '',
          component: 'ElInput',
          attr: {
            placeholder: '请输入流程标题'
          }
        },
        {
          label: '审批类型',
          name: 'applyType',
          op: '=',
          value: '',
          component: 'DgSelect',
          attr: {
            placeholder: '请选择审批类型',
            enum: 'SelfAuthApplyTypeEnum'
          }
        },
        {
          label: '创建时间',
          name: 'createTime',
          op: 'between',
          type: 'DATE',
          value: '',
          component: 'DgDatePicker'
        }
      ],
      pageOptList: ['权限变更申请']
    };
  },
  computed: {},
  methods: {
    receviceOpt(btn, row) {
      if (btn == '权限变更申请') {
        this.handleApplyPermission(null);
      }
    },
    /**
     * 权限申请
     */
    handleApplyPermission(applyOrdNo) {
      const vm = this;
      const layer = this.$dgLayer({
        title: applyOrdNo ? '编辑' : '权限变更申请',
        props: {
          applyOrdNo: applyOrdNo ? applyOrdNo : '',
          type: applyOrdNo ? 'edit' : 'add'
        },
        content: require('./component/basic-form.vue'),
        area: ['1100px', '800px'],
        on: {
          success(params) {
            vm.handleSearch();
            layer.close(layer.dialogIndex);
          },
          close() {
            layer.close(layer.dialogIndex);
          }
        }
      });
    },
    handleViewDetail(row) {
      const layer = this.$dgLayer({
        title: '详情',
        props: {
          applyOrdNo: row.applyOrdNo,
          type: 'detail'
        },
        content: require('./component/detail.vue'),
        area: ['1280px', '900px'],
        on: {
          success(params) {
            layer.close(layer.dialogIndex);
          },
          close() {
            layer.close(layer.dialogIndex);
          }
        }
      });
    },
    handleDelete(row) {
      this.$dgConfirm(`是否确定删除这条数据！`, '提示', {}).then(() => {
        delApply({
          applyOrdNo: row.applyOrdNo
        }).then((res) => {
          const { result, msg } = res.data;
          if (result == '200') {
            this.$message.success('删除成功！');
            this.handleSearch();
          } else {
            this.$message.warning(msg);
          }
        });
      });
    },
    handleRecall(row) {
      this.$dgConfirm(`是否确定撤回这条数据！`, '提示', {}).then(() => {
        const params = {
          applyOrdNo: row.applyOrdNo
        };
        recallApply(params).then((res) => {
          this.$message.success('撤回成功！');
          this.handleSearch();
        });
      });
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='scss'>
</style>